vue项目下载public目录下的文件

image.png
        <a href="/plugin/v1.0.0.2.zip" download >
          <el-button type="primary"  style="transform:translateY(-10px)">下载弹屏插件</el-button>
        </a>

只需要放在public文件夹里 然后直接链接


在vue-cli 2.x中,需要将本地资源放在static文件夹下,文件的名称可以随意,但是必须是英文。如果后续需要修改下载文件的名称,可以通过 download 这个属性来控制,在这里可以是中文。如下代码:

<a href="../../../static/template.csv" download="分析模板.csv">下载文件</a>

vue-cli 3.x
在vue-cli 3.x中,需要将本地资源放在public文件夹下,文件的名称可以随意,但是必须是英文。如果后续需要修改下载文件的名称,可以通过 download 这个属性来控制,在这里可以是中文。如下代码:

<a :href="`${path}data.xlsx`" download="data.xlsx">下载商品库存数据</a><br>
data() {
    return {
      path: process.env.BASE_URL
    }
}
注意:

1、在设置download属性值时,必须有文件后缀名,否则下载的文件将无法打开。

2、本地文件必须放在 static 或者 public 文件夹中,不能放在assets文件夹中,否则下载时会报 找不到文件的错误

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容