前端部署发布浏览器缓存问题
方法一代码清楚法1:每次修改package.json版本号2:在main.js中配置const VUE_APP_VERSION = require('../package.json').versionconst vers = window.localStorage.getItem("appVersion");if (VUE_APP_VERSION != vers) {localStorage.cl
·
方法一
代码清楚法
1:每次修改package.json版本号
2:在main.js中配置
const VUE_APP_VERSION = require('../package.json').version
const vers = window.localStorage.getItem("appVersion");
if (VUE_APP_VERSION != vers) {
localStorage.clear()
window.localStorage.setItem("appVersion", VUE_APP_VERSION);
location.reload()
}
方法二
修改打包文件名
1.找到webpack .prod.conf.js
1.定义版本变量: const Version = new Date().getTime(); // 这里使用的是时间戳 来区分 ,也可以自己定义成别的如:1.1
2.修改要生成的js和css文件的配置项,把刚刚声明的版本拼接进要生成的文件名中;
output: {undefined
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].' + Version + '.js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].' + Version + '.js')
},
2.npm run build 打包后 就可以看到dist 文件里的js 文件名带上里版本号
方法三
在入口文件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">
方法四
nginx 配置,让index.html不缓存
location = /index.html {
add_header Cache-Control "no-cache, no-store";
}
no-cache, no-store可以只设置一个
no-cache浏览器会缓存,但刷新页面或者重新打开时 会请求服务器,服务器可以响应304,如果文件有改动就会响应200
no-store浏览器不缓存,刷新页面需要重新下载页面
更多推荐
已为社区贡献10条内容
所有评论(0)