vue开发中遇到的缓存问题

单页面应用总是存在缓存问题，特别是在微信端，更新页面资源后访问的还是旧的资源文件，缓存的问题是因为用户访问的脚本地址并没有改变，浏览器就会读取原来的脚本

1、项目开发过程中，可以使用加meta，强制禁止页面缓存

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

View Code

（建议：设置开发模版和打包模版）

const DEV_CONFIG = {
  ...
  chainWebpack: (config) => {
    // 开发模式加入特殊模版
    config.plugin('html').tap((args) => {
      // eslint-disable-next-line no-param-reassign
      args[0].template = path.join(__dirname, './public/', 'devIndex.html');
      return args;
    });
  },
};

View Code

2、每次打包的时候给生成的文件增加随机数

const time = Date.now();
const PROD_CONFIG = {
  css: {
    extract: {
      filename: 'css/[name].css',
      chunkFilename: `css/[name].css?r=${time}`,
    },
  },
  chainWebpack: (config) => {
    config.module.rule('images').use('url-loader').tap(options => ({
      ...options,
      name: 'img/[name]-[hash].[ext]',
    }));
    config.output.chunkFilename(`js/[name].min.js?r=${time}`);
  },
  // filenameHashing: false,
  publicPath: '/',
};

View Code