vue3.0 缓存处理

vue.config.js配置

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
const isProduction = process.env.NODE_ENV === 'production';
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin') //控制版本生成，解决缓存
const webpack = require('webpack');
const verson_date = new Date(); //版本时间
const timespan=`${verson_date.getTime()}`
const appVision=`v_${verson_date.getFullYear()}${verson_date.getMonth()+1}${verson_date.getDate()}_${verson_date.getHours()}_${verson_date.getMinutes()}_${verson_date.getSeconds()}`
module.exports = {
  publicPath: isProduction ? process.env.VUE_APP_HISTORYURL : "/",
  outputDir: "dist",
  indexPath: "index.html",
  lintOnSave: false,
  productionSourceMap: false,//打包时不要map文件
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "./src/common/common.scss";
        `},
      // 修改主题颜色
      less: {
        modifyVars: {
          'address-list-item-radio-icon-color': "#FE7631"
        }
      },
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            rootValue: 37.5, //换算基数，
            exclude: /(node_module)/,  //忽略的文件夹配置
          }),
        ]
      }
    }
  },
  devServer: {
    // open: process.platform === 'darwin',
    // host: 'localhost',
    // open: true, //配置自动启动浏览器
    proxy: {
      '/': {
        target: `${process.env.VUE_APP_URL}`, //对应自己的接口
        changeOrigin: true,
        ws: false,
        pathRewrite: {
          '^/': ''
        }
      }
    }
  },
  configureWebpack: config => {
    if (isProduction) {
      // 开启服务器gzip压缩
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }));
      // 禁用console信息
      config.plugins.push(new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            drop_debugger: true,
            drop_console: true
          }
        }
      })
      );
      //html 引用 =》css+body+js
      config.plugins.push(new HtmlWebpackPlugin({
        filename: 'index.html',
        title: '\u200E',
        template: 'public/index.html',  //配置渲染的模版
        hash: true,      //开启hash
        inject: true,  //js尾部
        meta: { yzl_verson:`v-${appVision}` }
      }));
      config.plugins.push(new webpack.HashedModuleIdsPlugin());
    }
  }
  ,
  chainWebpack: config => {
    if (isProduction) {
      //压缩js代码   // 参照webpack官方配置
      config.optimization.minimize(true).runtimeChunk('single').splitChunks({
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      });

      config.output
        //修改output的js加上时间戳  //解决缓存问题
        .filename(`js/[name].${appVision}.${timespan}.js`)    
        .chunkFilename(`js/[name].${appVision}.${timespan}.js`)
        // 参照webpack官方配置
        // .filename('js/[name].[contenthash].js')

    }
  }
}

希望可以帮到你！