vue-cli3 pubic静态资源引入

场景一：下载本地excel模版文件

场景二：引入静态资源包，比如clipboard.js实现复制功能

场景三：引入pdf.js文件，实现pdf文件预览

场景四：需要在打包后修改配置地址

静态资源存放位置

静态资源文件放入public文件夹下（类似cli2里面的static文件夹），打包时不会被wenpack处理，输出文件在dist文件夹下。

引入方式：

publicPath: process.env.BASE_URL; //获取静态资源路径

<a :href="`${publicPath}xxx.xlsx"` target="_blank">点击下载模版</a>

在index.html中通过
<script src="<%= BASE_URL %>clipboard.min.js"></script>

参考
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
可以看到项目中ico图标就是通过这种方式引入！！

3. pdf预览

var fileUrl = encodeURLComponent('xxxx'); // xxxx文件下载的路径，注意要对url编码
var pdfUrl = process.env.BASE_URL+'pdfjs/web/viewer.html?file='+fileUrl;  // iframe的src地址

4. 修改打包后的配置地址

public文件夹下文件是不被处理的，所以我们可以创建一个config.js文件

config.js

window.global_config = {
    BASE_URL: 'http://localhost:8080'
}

在index.html中引入

<script src="<%= BASE_URL %>config.js"></script>

使用

console.log(window.global_config.BASE_URL)

遇到的问题，修改打包后的config.js文件，值不更新

排查方式：
1.先确认config.js文件是否更新，浏览器的缓存可能会影响
2.可以修改js文件名，比如加上hash值，config.hashxxx.js，在index.html引入的地方也要对应修改

综上

本地测试ok