场景一:下载本地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图标就是通过这种方式引入!!
- pdf预览
var fileUrl = encodeURLComponent('xxxx'); // xxxx文件下载的路径,注意要对url编码
var pdfUrl = process.env.BASE_URL+'pdfjs/web/viewer.html?file='+fileUrl; // iframe的src地址
- 修改打包后的配置地址
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