sport-web/vue.config.js

const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir);
}

/** @type {import('webpack').Configuration} */
module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/" : "./",

  // 将构建好的文件输出到哪里，本司要求
  // outputDir: "dist",

  // 放置生成的静态资源(js、css、img、fonts)的目录。
  // assetsDir: "static",

  // 指定生成的 index.html 的输出路径
  indexPath: "index.html",

  // 是否使用包含运行时编译器的 Vue 构建版本。
  runtimeCompiler: false,

  transpileDependencies: [],

  // 如果你不需要生产环境的 source map
  productionSourceMap: false,

  // 配置css
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    sourceMap: true,
    // css预设器配置项
    // loaderOptions: {
    //   postcss: {
    //     plugins: [
    //       require("postcss-px2rem")({
    //         remUnit: 100,
    //       }),
    //     ],
    //   },
    // },
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },

  // 是一个函数，允许对内部的 webpack 配置进行更细粒度的修改。
  chainWebpack: config => {
    // 配置别名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@assets", resolve("src/assets"))
      .set("@components", resolve("src/components"))
      .set("@views", resolve("src/views"));

    config.optimization.minimizer("terser").tap(args => {
      // 去除生产环境console
      args[0].terserOptions.compress.drop_console = true;
      return args;
    });
    config.module
      .rule("mjs")
      .test(/\.mjs$/)
      .type("javascript/auto")
      .include.add(/node_modules/)
      .end();
  },

  // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
  parallel: require("os").cpus().length > 1,

  pwa: {
    iconPaths: {}
  },
  devServer: {
    host: "0.0.0.0",
    port: 9090, // 端口号
    disableHostCheck: true,
    // 配置多个代理
    proxy: {
      "/api": {
        target: process.env.VUE_APP_BASE_URL,
        ws: true, // 代理的WebSockets
        changeOrigin: true, // 允许websockets跨域
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }
};