vue4.X 配置build打包不同环境不同域名的处理

1、package.json 里 修改 --mode 后面 是对应下面的 文件 buildtest 是执行 npm run buildtest

"scripts": {

"buildtest": "vue-cli-service build --mode test",

"build": "vue-cli-service build --mode prod",

},

2、这时需要创建 2个文件，说明一下，NODE_ENV 要配置为'production' 因为保持和线上打包hash一样，否则打出的是 1.js 2.js.......VUE_APP_CURRENTMODE是自已定义变量 格式为VUE_APP_XXXX  定义这个是为了区分 什么环境 用什么域名去打包。

.env.test 代码为

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'test'

.env.prod 代码为

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'production'

3、可以全局配置域名的地方 正式和测试打包不同的域名。

let host = ''
if (process.env.VUE_APP_CURRENTMODE === 'production')  {
    host = 'www.XXXXX.com'
} else if (process.env.VUE_APP_CURRENTMODE === 'test') {
   host = 'test.XXXXX.com'
}

4、如果打包 不打css 那就要配置一下  vue.config.js 了

css: {
    extract: true  // 是否使用css分离插件 ExtractTextPlugin
  },

好了。配置完成 ！！！

npm run build 正式打包

npm run buildtest 测试打包