vue.config.js 全局 CLI 配置

#全局 CLI 配置

https://blog.csdn.net/weixin_44524836/article/details/88376804
https://blog.csdn.net/namechenfl/article/details/99325222

+vue.config.js

const path = require("path");
const UglifyPlugin = require('uglifyjs-webpack-plugin')// 对js压缩大小,加速load速度
module.exports = {
  publicPath: "./", // 基本路径
// publicPath: process.env.NODE_ENV === 'production'? '/production-sub-path/' : '/',
  outputDir: "dist2",
  assetsDir: "assets",
  lintOnSave: false,
  // webpack配置
  //   chainWebpack: config => {},
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.mode = 'production'
      // 将每个依赖包打包成单独的js文件
      let optimization = {
        runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 20000,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name (module) {
                // get the name. E.g. node_modules/packageName/not/this/part.js
                // or node_modules/packageName
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                // npm package names are URL-safe, but some servers don't like @ symbols
                return `npm.${packageName.replace('@', '')}`
              }
            }
          }
        },
        minimizer: [new UglifyPlugin({
          uglifyOptions: {
            compress: {
              // warnings: false,
              drop_console: true, // console
              drop_debugger: false,
              pure_funcs: ['console.log'] // 移除console
            }
          }
        })]
      }
      Object.assign(config, {
        optimization
      })
    }  else {
      // 为开发环境修改配置...
      config.mode = "development";
    }
    Object.assign(config, {
      // 开发生产共同配置
      resolve: {
        alias: {
          "@": path.resolve(__dirname, "./src"),
          "@c": path.resolve(__dirname, "./src/components"),
          "@p": path.resolve(__dirname, "./src/pages")
        } // 别名配置
      }
    });
  },
  productionSourceMap: true, // 生产环境是否生成 sourceMap 文件
  // css相关配置
  // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
  css: {
    extract: true, // 是否使用css分离插件 ExtractTextPlugin
    sourceMap: false, // 开启 CSS source maps?
    loaderOptions: {
      css: {}, // 这里的选项会传递给 css-loader
      postcss: {} // 这里的选项会传递给 postcss-loader
    }, 
    requireModuleExtension: false // 启用 CSS modules for all css / pre-processor files.
  },
  parallel: require("os").cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
  pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  // webpack-dev-server 相关配置
// 测试服务启动时显示的ip,端口,代理配置
  devServer: {
    open:true, //自动打开页面 实时刷新
    host: "localhost",
    port: 8081,
    https: false,
    hotOnly: false,
    proxy: {
      //开发环境（dev）中解决了跨域问题
      "/api": {
        target: "https://www.runoob.com/try/ajax/", //设置你调用的接口域名和端口号 别忘了加http
        // ws: true,
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true,
        pathRewrite: {
          "^/api": "" //用"/api"代替target里面的地址
        }
      },
        //Webpack之before快速创建简单测试接口: 在同一个服务里，访问地址跟启动服务地址一样，不存在跨域
    before(app) {
      // http://localhost:8081/test
      app.get("/test", (req, res) => {
        res.json(test);
      });
    }
      // 第三方插件配置
      // pluginOptions: {}
    }
  }
};