vue项目发版后清理浏览器缓存代码

1、在index.html中添加代码

<!-- 清除浏览器缓存 -->
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Cache" content="no-cache">

2、在main.js中清理本地缓存

// 在 main.js 中添加以下代码
import { version } from '../package.json';

window.addEventListener('load', () => {
  // 获取当前版本号
  const currentVersion = localStorage.getItem('appVersion');

  // 如果当前版本号与最新版本号不一致，则清除缓存
  if (currentVersion !== version) {
    localStorage.clear();
    localStorage.setItem('appVersion', version);
    location.reload(true);
  }
});

3、使用 webpack 插件来实现自动添加版本号

npm install webpack-md5-hash --save-dev

// webpack.config.js

const WebpackMd5Hash = require('webpack-md5-hash');

module.exports = {
  // ...其他配置
  plugins: [
    new WebpackMd5Hash()
  ]
};