Vue.config.js 增加( js. css)版本号 ,修改文件名称

场景: 增加 js, css 版本号 , 避免缓存

方案: Vue Cli3 的Vue.config.js 中的 configureWebpack 进行配置:

output 配置js

plugins 配置css

下方js路径 决定了 在dist 中文件路径

process.env.VUE_APP_VERSION = require(’./package.json’).version

 configureWebpack: {
    plugins: [
      isProductionEnvFlag && isOpenPrerenderSPA
        ? new require('prerender-spa-plugin')({
            // Required - The path to the webpack-outputted app to prerender.
            staticDir: path.join(__dirname, 'dist'),
            // Required - Routes to render.
            routes: ['/', '/explore']
          })
        : () => {},
      isProductionEnvFlag ? new SizePlugin() : () => {},
      new MiniCssExtractPlugin({
        // 修改打包后css文件名
        filename: `css/[name].${Timestamp}.css`,
        chunkFilename: `css/[name].${Timestamp}.css`
      })
    ],
    output: {
      // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      filename: `js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
      chunkFilename: `js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
    }
  },

在上面代码之前准备: 时间戳

作为版本号 ; MiniCssExtractPlugin

//添加版本号  此处用时间戳
const Timestamp = new Date().getTime()

// 处理 css 时  引入MiniCssExtractPlugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin')