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

方法一

代码清楚法

1:每次修改package.json版本号

前端部署发布浏览器缓存问题_第1张图片

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添加




方法四

nginx 配置,让index.html不缓存

location = /index.html {
    add_header Cache-Control "no-cache, no-store";
}

no-cache, no-store可以只设置一个
no-cache浏览器会缓存,但刷新页面或者重新打开时 会请求服务器,服务器可以响应304,如果文件有改动就会响应200
no-store浏览器不缓存,刷新页面需要重新下载页面

你可能感兴趣的:(vue,前端小技巧,js,vue.js,javascript,webpack,缓存)