vue-cli 4+ 多变量版本打包

vue-cli 2及一下的打包,可以看这个

veu-cli4多变量打包有两种解决办法:
1.cross-env
通用的 react等框架也能用

第一步
安装

npm i --save-dev cross-env

第二步
在package.json中设置变量
这里不要设置NODE_ENV=xxx 会和vue-cli打包策略冲突
比如我们设置个HOST_ENV

"scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build --modern",
      "lint": "vue-cli-service lint",
      "build_2": "cross-env HOST_ENV=build2 vue-cli-service build"
    },

第三步
获取配置的变量进行相应操作,比如axios中

instance.interceptors.request.use(
  function (config) {
    if (process.env.HOST_ENV== "build2 ") {
             config.baseURL = ""    //改为对应的host    
             return config;    
    }else{
             config.baseURL = ""   
             return config;
    }
  },
  error => {
    return Promise.reject(error);
  }
);

2.vue-cli本身
比如我们的项目如果发布到华为云服务器要换成华为云对应的host
第一步
packasge.json增加对应mode

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --modern",
    "lint": "vue-cli-service lint",
    "huawei": "vue-cli-service build --modern  --mode huawei"
  },

第二步
根据mode名建对应的env文件,比如上面--mode后面是huawei,
要在项目根目录建个.env.huawei

NODE_ENV = "production"

VUE_APP_HOST = "huawei"

因为我们只是打包的时候配置host,所以NODE_ENV 还要设置为production

第三步
调用该变量
通过process.env.VUE_APP_HOST就能获得配置的变量,然后进行相应操作即可