vue-cli 3.0 打包（vue.config.js）修改js，css，img的输出路径

vue-cli3.*的打包配置都被抽象内置在项目的依赖中，可以使用命令来查看具体的项目配置信息（out.js表示输出的文件名称）

vue inspect > out.js

因此，如果需要自定义配置，则需要在项目的根目录创建文件vue.config.js，并在该文件中进行具体的自定义配置。

修改js的配置如下：

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

修改css的配置如下：

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;
      });
  },

完整的配置如下：

const path = require("path");
const systemConfig = require("./src/lib/system.config");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //表示自定义的系统配置
module.exports = {
  // 基本路径
  publicPath: "/",
  // 输出文件目录
  outputDir: path.resolve(__dirname, "../server/client"),
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  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;
      });
  },
  // webpack-dev-server 相关配置
  devServer: {
    open: true,
    host: "localhost",
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: {
      "/api/app": {
        target: "http://localhost:5423",
        changeOrigin: true, //是否跨域
        pathRewrite: {
          "^/api/app": "/api/app" //重写接口
        }
      }
    }
  }
};