1、设置html

在入口文件 /public/index.html中,head 标签中,添加

<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">

2、配置vue.config.js

const Timestamp = new Date().getTime()
module.exports = {
    
  productionSourceMap: false, // false : 不生成map文件
  css: {
    
    loaderOptions: {
    
      postcss: {
    
        plugins: [
          require('postcss-plugin-px2rem')({
    
            rootValue: 75, //px换算rem基数,100也就是 100px换算成1rem
            // unitPrecision: 5, //允许REM单位增长到的十进制数字.
            //propWhiteList: [], //默认值是一个空数组,这意味着禁用白名单并启用所有属性.
            // propBlackList: [], //黑名单
            exclude: /(node_module)/, //默认false,可以（reg）利用正则表达式排除某些文件夹的方法,例如/(node_module)\/如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
            // selectorBlackList: [], //要忽略并保留为px的选择器
            // ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true.
            // replace: true, // （布尔值）替换包含REM的规则,而不是添加回退.
            mediaQuery: false, //（布尔值）允许在媒体查询中转换px.
            minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem). 默认 0
          })
        ]
      }
    },
    extract: {
    
      /** * 一、打包后的css with version number,Do not change the file name. * filename: `css/[name].css?v=${Timestamp}` * chunkFilename: `css/[name].css?v=${Timestamp}` */
      /** * 二、一种方式,After each packagecssThe file name will be updated. */
      filename: `css/[name].${
      Timestamp}.css`,
      chunkFilename: `css/[name].${
      Timestamp}.css`
    }
  },
  chainWebpack(config) {
    
    // 配置svg =======> svg-sprite-loader
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
    
        symbolId: 'icon-[name]'
      })
  },
  configureWebpack: (config) => {
    
    if (process.env.NODE_ENV === 'production') {
    // 为生产环境修改配置...
      config.mode = 'production';
      config["performance"] = {
    //打包文件大小配置
        "maxEntrypointSize": 10000000,
        "maxAssetSize": 3000000000
      }
    }
    config.output.filename = `js/[name].${
      Timestamp}.js`
    config.output.chunkFilename = `js/[name].${
      Timestamp}.js`
  }
}

3、打包

终端输入：npm run build

结果如下：