LJYX/vue.config.js

const cdn = {
  // 开发环境
  dev: {
    css: [],
    js: [],
  },
  // 生产环境
  build: {
    css: [
      //'//unpkg.com/element-plus@2.3.7/theme-chalk/index.css'
    ],
    js: [
      //最好限定版本号
      // '//unpkg.com/vue@3',
      // '//unpkg.com/vuex',
      // '//unpkg.com/element-plus',
      // '//unpkg.com/vue-router',
      // '//unpkg.com/axios',
      // '//unpkg.com/@element-plus/icons-vue'
    ],
  },
};
// externals
const externals = {
  // vue: 'Vue',
  // 'vue-router': 'VueRouter',
  // vuex: 'Vuex',
  // 'element-plus': 'ElementPlus',
  // axios: 'axios',
  // '@element-plus/icons-vue': 'ElementPlusIconsVue'
};

const fs = require('fs');
const path = require('path');

module.exports = {
  configureWebpack: (config) => {
    // 为生产环境修改配置...
    if (process.env.NODE_ENV === 'production') {
      // externals  放置需要使用 cdn 的库
      config.externals = externals;

      config.mode = 'production';
      // 打包文件大小配置
      config.performance = {
        //入口起点的最大体积 默认值是：250000
        maxEntrypointSize: 50000000,
        //生成资源(asset)文件的最大体积
        maxAssetSize: 30000000,
      };
    }
  },
  devServer: {
    // allowedHosts: [
    //     'host.com', // 允许访问的域名地址，即花生壳内网穿透的地址
    //     '.host.com'   // .是二级域名的通配符
    // ],
    // 跳过检查host
    disableHostCheck: true,
    // https: { //https调试配置
    //     key: fs.readFileSync(path.join(__dirname, 'localhost.key')),
    //     cert: fs.readFileSync(path.join(__dirname, 'localhost.cert')),
    // },
    proxy: {
      '/api': {
        target: 'http://kaung.cn:7001',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },

  chainWebpack: (config) => {
    // 配置，将当前页定义的cdn值传到主页面（index.html）
    config.plugin('html').tap((args) => {
      // 这里我是除本地环境，其余均使用CDN，可自己选择是否配置
      if (process.env.NODE_ENV === 'production') {
        args[0].cdn = cdn.build;
      } else {
        args[0].cdn = cdn.dev;
      }

      //args[0].cdn = process.env.VUE_APP_STAGE === 'LOCAL' ? {} : CDN
      //args[0].cdn = CDN

      //args[0].title = this.$store.getters.getWebSetting.projectName; //"ERP综合管理系统";
      return args;
    });
  },
  // chainWebpack: (config) => {
  //     // 通过 style-resources-loader 来添加less全局变量
  //     const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
  //     types.forEach(type => {
  //         let rule = config.module.rule('less').oneOf(type)
  //         rule.use('style-resource')
  //             .loader('style-resources-loader')
  //             .options({
  //                 patterns: [path.resolve(__dirname, './lessVariates.less')]
  //             });
  //     });

  //     // // `svg-sprite-loader`: 将svg图片以雪碧图的方式在项目中加载
  //     // config.module
  //     //     .rule('svg')
  //     //     .test(/\.svg$/) // 匹配svg文件
  //     //     .include.add(resolve('src/svg')) // 主要匹配src/svg
  //     //     .end()
  //     //     .use('svg-sprite-loader')
  //     //     .loader('svg-sprite-loader') // 使用的loader，主要要npm该插件
  //     //     .options({symbolId: 'svg-[name]'}) // 参数配置
  // }
};