vue访问本地静态资源文件

1、页面内

<ul class="xzlb">

        <li v-for="(item,index) in manualList" :key="index" @click="downManual(item,index)">

          <p>{{item.fileName}}</p>

        </li>

 </ul>

export default {

data() {

return {

manualList: [{

          fileName: 'XXX',//自定义文件名称

          acronymy: 'gwglgnyhczsc' //首字母拼音

        }, {

          fileName: 'XXX',

          acronymy: 'zwxxgnyhczsc'

        }]

      }

   },

methods: {

      downManual(item, index) {

        console.log(item, index)

        axios.get('static/handbook/' + item.acronymy + '.docx', { //静态资源文件夹public,根据你文件路径来,文件后缀名自取 例：public/static/handbook

          responseType: 'blob',

        }).then(response => {

          const url = window.URL.createObjectURL(new Blob([response.data]));

          const link = document.createElement('a');

          let fname = item.fileName + '.docx';//导出后的文件名.文件类型，文件类型同文件后缀名保持一致

          link.href = url;

          link.setAttribute('download', fname);

          document.body.appendChild(link);

          link.click();

        }).catch(error => {

          console.log('error:' + JSON.stringify(error))

        });

      }

}

}

2、public文件下用数组首字母拼音创建文件，避免文件无法导出 例如：public/static/handbook/gwglgnyhczsc.docx