// 执行npm run dev时报错： MaxListenersExceededWarning:Possible EventEmitter memory leak detected
require("events").EventEmitter.defaultMaxListeners = 50;
const { defineConfig } = require("@vue/cli-service");
const webpack = require("webpack");
//去除多余的console.log
const TerserPlugin = require("terser-webpack-plugin");
const path = require("path");
// 获取.env文件的环境变量
const dotenv = require("dotenv");
// 定向目录
const resolve = (dir) => path.join(__dirname, dir);
// 加载多环境的 .env 配置
dotenv.config({ path: `.env.${process.env.VUE_APP_NODE_ENV}` });
// 根据环境 build 不同的 proxy
const { api } = require("./api");
const API = api[process.env.VUE_APP_NODE_ENV];
const buildEnvApiProxy = () => {
  const PROXY = {};
  Object.keys(API).forEach((key) => {
    console.log(
      `环境====》${process.env.VUE_APP_NODE_ENV}`,
      "====>",
      API[key]
    const pathRewrite = {};
    pathRewrite[`^${key}`] = "";
    PROXY[`${key}`] = {
      target: API[key],
      changOrigin: true,
      pathRewrite: pathRewrite,
  return PROXY;
// 根据环境 build 不同的 plugins
const buildEnvPlugins = () => {
  const plugins = [];
  if (process.env.VUE_APP_NODE_ENV === "prod") {
    plugins.push(
      new TerserPlugin({
        terserOptions: {
          ecma: undefined,
          warnings: false,
          parse: {},
          compress: {
            drop_console: true,
            drop_debugger: true,
            pure_funcs: ["console.log"], // 移除console
  return plugins;
module.exports = defineConfig({
  publicPath: "/",
  outputDir: "dist",
  assetsDir: "static",
  transpileDependencies: true,
  pages: {
    index: {
      // page的入口文件
      entry: "src/main.ts",
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: "dsdsdddss",
  // 向 CSS 相关的 loader 传递选项
  css: {
    // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS
    // 默认生产环境下是 true，开发环境下是 false
    extract: false,
    // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
    sourceMap: false,
    /*为预处理器 loader 传递自定义选项*/
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/scss/_variable.scss";`, // 预设全局css变量
      css: {
        // 这里的选项会传递给 css-loader
      postcss: {
        // 这里的选项会传递给 postcss-loader
  chainWebpack: (config) => {
    // 修复热更新失效
    config.resolve.symlinks(true);
    config.resolve.alias // 添加别名
      .set("@", resolve("src"))
      .set("@assets", resolve("src/assets"))
      .set("@components", resolve("src/components"))
      .set("@views", resolve("src/views"))
      .set("@store", resolve("src/store"))
      .set("@router", resolve("src/router"))
      .set("@utils", resolve("src/utils"));
  devServer: {
    host: "127.0.0.1",
    port: 8888,
    proxy: buildEnvApiProxy(),
  configureWebpack: {
    devtool: "eval-source-map",
    plugins: [
      new webpack.DefinePlugin({
      ...buildEnvPlugins(),
需要结合 dotenv, cross-env， .env
package.json