我要评论vue打包资源按时间戳
问题
由于默认的vue打包是基于资源文件的hash模式，但是由于浏览器缓存，在实际发版过程中会出现引用老版本的问题。
解决
修改vue资源打包，在资源文件后加上打包时间戳，以保证每次发版后，所有资源均为最新，避免缓存引用问题，尽管牺牲掉发版后文件加载的效能问题，但是也解决了潜在的缓存问题。
修改
修改“vue.config.js”文件配置：
const timestamp = new date().gettime();
module.exports = {
.......
css: {
extract: {
filename: `css/[name].${timestamp}.css`,
chunkfilename: `css/[name].${timestamp}.css`
}
},
chainwebpack: config => {
config.output.filename(`js/[name].${timestamp}.js`)
config.output.chunkfilename(`js/[name].${timestamp}.js`)
.......
vue打包添加时间戳,实现更新项目自动清除缓存（webpack/vue-cli打包两种方式）
本来vue打包会自动用chunkhash来解决缓存问题，但是部分浏览器不会自动更新，因此通过增加时间戳不同来实现自动重新加载文件，保持最新的界面。
webpack打包
修改build/webpack.prod.conf.js文件
使用vue-cli打包
修改vue.config.js文件
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论