前言： vue项目打包部署上线后，因浏览器缓存问题，导致用户访问的依旧是上个迭代批次的旧资源，需要用户手动清除缓存才能更新至最新版本，影响用户体验。
解决方法：
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">
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`,
}
},
})
package.json（注：每次build打包时，需要更改版本号）
"version": "1.0.0",
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()
}