效果圖：

vue-cli 2.x?

在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> data() {return {path: process.env.BASE_URL}},

?

注意：

1、在設置download屬性值時，必須有文件后綴名，否則下載的文件將無法打開。

2、本地文件必須放在 static 或者 public 文件夾中，不能放在assets文件夾中，否則下載時會報 找不到文件的錯誤

?

總結

以上是生活随笔為你收集整理的在Vue框架中通过a标签实现下载本地资源的功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。