【前端】前端部署发布浏览器缓存问题

方法一

代码清楚法

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

【参考链接】

前端部署发布浏览器缓存问题