vue-cli 3.0 打包怎么给js和css加上版本号，怎么修改js和css的名字

Question

vue-cli 3.0 打包怎么给js和css加上版本号，怎么修改js和css的名字。

Answer 1

在项目的根目录创建文件vue.config.js,然后再该文件中配置对应的打包输出，具体如下：

const path = require("path");
const systemConfig = require("./src/lib/system.config");   //自定义的文件，获取自己定义的配置信息
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  configureWebpack: {
    output: {
      // 输出重构  打包编译后的 文件名称  【模块名称.版本号】
      filename: `js/[name].${systemConfig.version}.js`,
      chunkFilename: `js/[name].${systemConfig.version}.js`
    },
    plugins: [
      new MiniCssExtractPlugin({
        // 修改打包后css文件名
        filename: `css/[name].${systemConfig.version}.css`,
        chunkFilename: `css/[name].${systemConfig.version}.css`
      })
    ]
  },
  // 修改打包后img文件名
  chainWebpack: config => {
    config.module
      .rule("images")
      .use("url-loader")
      .tap(options => {
        options.name = `img/[name].${systemConfig.version}.[ext]`;
        options.fallback = {
          loader: "file-loader",
          options: {
            name: `img/[name].${systemConfig.version}.[ext]`
          }
        };
        return options;
      });
  },
 
};

Answer 2

const Timestamp = new Date().getTime(); // 时间戳
module.exports = {
configureWebpack: { // webpack 配置

output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
  filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
  chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
},

},
...
}