【vue】项目迭代部署后 自动清除浏览器缓存

前言： vue项目打包部署上线后，因浏览器缓存问题，导致用户访问的依旧是上个迭代批次的旧资源，需要用户手动清除缓存才能更新至最新版本，影响用户体验。
解决方法：

1. html根文件添加以下标签

  <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"><meta http-equiv="expires" content="0">

2. vue.config.js

const timeStamp = new Date().getTime();
module.exports = defineConfig({filenameHashing: false, // 打包的时候不使用hash值.因为我们有时间戳来确定项目的唯一性了.configureWebpack: {output: { // 输出重构 打包编译后的js文件名称,添加时间戳.filename: `js/js[name].${timeStamp}.js`,chunkFilename: `js/chunk.[id].${timeStamp}.js`,}},css: {extract: { // 打包后css文件名称添加时间戳filename: `css/[name].${timeStamp}.css`,chunkFilename: `css/chunk.[id].${timeStamp}.css`,}},
})

3. package.json （注：每次build打包时，需要更改版本号）

"version": "1.0.0",

4. 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);// 清除存储在浏览器的数据window.localStorage.removeItem('liveDataSort')window.localStorage.removeItem('liveListSort')location.reload()
}