前提
Vue项目是使用vue-cli进行构建的
功能描述
点击相应按钮，下载项目内的文件
实现步骤
此处以下载.exe文件为例（如果是txt、jpg之类的文件，最好打成压缩包，不然的话会直接打开而不是下载）
- 将需要下载的资源放入项目指定文件夹中：
使用vue-cli 2构建的项目，将资源放入static 文件夹；
使用vue-cli 3构建的项目，将资源放入public 文件夹。
只有将资源放入上述指定文件夹中，项目中才能拿到到它们的url地址。
我是使用vue-cli 3构建的项目，因此我把资源放入public文件夹中：
vue-cli 3对项目的结构和静态文件的引用方式都进行了简化，对比如下：
vue-cli 2 生成的目录结构
vue-cli 3 生成的目录结构
- 使用
window.location.href = ''打开文件链接，触发下载：
appDownload() {
//直接填写public下的文件路径即可，编译时会自动定位到public文件夹下
window.location.href = '/app/IE11-x64.exe'
}
至此，功能已经实现完毕。
网友评论