关于浏览器缓存

方法一

代码清楚法

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浏览器不缓存，刷新页面需要重新下载页面

原文链接：https://blog.csdn.net/duanhy_love/article/details/121653805