【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()
}

原文地址：https://blog.csdn.net/T_ianxin/article/details/143874969

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！