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