vue项目中下载静态资源里的pdf文件

写vue项目时，常常会有提供给用户下载的pdf文件，当这些文件不是从服务器上请求回来的，而是放在vue项目的静态资源中，此时按照常规使用a标签，将出现如下的问题

href 指向项目中pdf文件的路径（不要出现中文），download 就是重命名pdf的文件名，不设置的话就是默认文件名

vue项目使用a标签下载静态资源assets里的文件

然后点击这些说明书，就会发现下载失败

怎么办？有2个办法

• 方法一：把pdf放入public文件夹中

<!-- 方法一 把pdf放入public文件夹中 -->
<a href="/20200701101925.pdf" download="XX使用说明书.pdf">XX使用说明书</a><br/>
<a href="/20200701101937.pdf" download="XX设备APP使用说明书.pdf">XX设备APP使用说明书</a><br/>

但是pdf会放在在打包的根目录里

打包的根目录

• 方法二：require引入
  1. 在data中先引入这些静态文件

  export default {
    name: "adminInfo"
    data() {
      return {
        pdf1: require('../../assets/files/20200701101925.pdf'),
        pdf2: require('../../assets/files/20200701101937.pdf')
    }
  }
  

  2. 然后 href 动态绑定

  <a :href="pdf1" download="国际扑克赛事运营管理平台使用说明书.pdf">国际扑克赛事运营管理平台使用说明书</a><br/>
  <a :href="pdf2" download="裁判手持设备APP使用说明书.pdf">裁判手持设备APP使用说明书</a><br/>
  

  3. 不出意外的话，这样写会报错！！！因为还需要在vue.config.js中配置 vue.config.js