vue 项目每一次打包上线,都会有浏览器缓存问题,需要用户手动清除缓存,十分麻烦
解决方案
1. 对编译打包文件增加时间戳
每次打包改变js的名称就OK了,在 vue.config.js
下修改/添加出口 output
,通过时间戳命名使每次包的名称都不一样
-
vue-cli3
中const Timestamp = new Date().getTime(); //时间戳 configureWebpack: { output: { filename: 'js/[name].'+Timestamp+'.js', chunkFilename: 'js/[name].'+Timestamp+'.js' } }
-
vue-cli2
中const Timestamp = new Date().getTime(); output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].'+Timestamp+'js'), chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+Timestamp+'js') }
2. meta设置不缓存
在 index.html
文件添加如下代码
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">