非vuecli项目

在正常项目中，如果想要下载一个本地文件，我们可以直接引用路径就好了，如下：

  1. // js
  2. window.open('./file.excel')

然后我们的file.excel就直接跟当前的js在同一级即可

vuecli项目

如果是vue项目，由于我们的脚手架帮我们配置了静态资源的路径，所以我们如果直接使用相对路径，是无法打包后是无法找到正确路径的
因为我们的vue文件中，webpack会使用vue-loader进行加载并编译，如果编译到文件，loader会进行路径的拼接：

  1. 相对路径：会根据vue.config.js的配置进行一个拼接
  2. 绝对路径：这种loader不会进行一个路径的拼接，而是直接找对应路径即可

vuecli例子

我想要做一个本地文件下载，我把文件放到vue的旁边，直接根据相对路径进行一个引入：

  1. // vue文件
  2. <a href="./test.zip"
  3.   class="download"
  4.   download="测试文件.zip">下载文件

文件位置：
image.png
此时点击【下载文件】按钮，发现浏览器显示未找到文件
image.png
这个主要是因为通过相对路径引入的文件，在编译过后就找不到了，所以这种静态文件，我们最好放static下

  1. <a href="static/test.zip"
  2.   class="download"
  3.   download="测试文件.zip">下载文件

注意：
test.zip放入了public/static下，但是引入的时候，不用加public，因为打包后的dist并没有public

2022.4.1更正

上面说的zip下载失败的原因，不是因为编译后找不到，其实是因为我们的webpack就没有配置zip文件的处理方式！！！！
比如我们把zip更换成png图片，效果就不一样了

  1. <a href="./components/test.png"
  2.     class="download"
  3.     download="test.png">下载图片
  4. </a>

以上代码，仍旧是不行的，a链接直接href地址，也是未发现文件，大概的原因应该是img直接src会被file-loader进行处理，但是href不会！！！
这里我理解为：src和href的区别吧：
src属于引入某个资源，所以webpack的file-loader会直接进行编译，但是href属于一个引用，暂时不会进行编译
所以我们稍微修改一下，将href链接使用require进行引入，则会被正常编译了！！！

  1. // template
  2. <a :href="file"
  3.     class="download"
  4.     download="test.png">下载图片
  5. </a>
  6. // JavaScript
  7. const file = require('./components/test.png')
  8. // ...
  9. data() {
  10.   return {
  11.     file: file
  12.   }
  13. }

这样就可以成功了！！！
然后如果是zip，则我们需要在vue.config.js中未zip文件配置对应的loader

  1. // vue.config.js
  2. chainWebpack: config => {
  3.   config.module
  4.     .rule('zip')
  5.     .test(/\.(zip)(\?.*)?$/)
  6.     .use('file-loader')
  7.     .loader('file-loader')
  8.     .end();
  9. }

注意：rule只是一个名称，需要使用test做文件匹配！！！
配置好后，我们就可以修改为zip了！！

  1. // template
  2. <a :href="file"
  3.     class="download"
  4.     download="test.zip">下载图片
  5. </a>
  6. // JavaScript
  7. const file = require('./components/test.zip')
  8. // ...
  9. data() {
  10.   return {
  11.     file: file
  12.   }
  13. }

好了，齐活儿！！！