vue3.0多环境打包及不同api接口运行

由于项目有很多环境，所以不便再使用每次改接口名字，于是用到了了多环境打包问题，首先在项目根目录下新建几个文件

其中.env配置（就是测试环境）为

NODE_ENV = 'test'
VUE_APP_CURENV = 'test'

 .env.development配置（就是开发环境）为

NODE_ENV = 'development'
VUE_APP_CURENV = 'development'

 .env.production配置（就是生态环境及线上环境）为

NODE_ENV = 'production'
VUE_APP_CURENV = 'production'

第二步：不同环境判断不同接口。在你自己封装的api接口里面去判断

export var BASE_URL=''; //接口地址
switch (process.env.VUE_APP_CURENV) {
  case "test":
    BASE_URL = "//api.mmios.com"; //测试环境url
    break;
  case "development":
    BASE_URL = "//api.mumuyun.com"; //开发环境url
    break;
  case "production":
    BASE_URL = "//api.mumuyun2.com"; //生产环境url
    break;
}

最后一步就是打包不同环境以及运行不同环境。在你的package.json里面的script写

"scripts": {
    "prod": "vue-cli-service serve --mode production",
    "dev": "vue-cli-service serve --mode development",
    "test":"vue-cli-service serve --mode test",
    "build": "vue-cli-service build --mode test",
    "pro-build": "vue-cli-service build --mode production",
    "dev-build": "vue-cli-service build --mode development",
    "lint": "eslint --fix --ext .js,.vue src"
  },

运行开发环境：npm run dev

运行测试环境：npm run test

运行生态环境：npm run prod

打包开发环境：npm run dev-build

打包测试环境：npm run build

打包生态环境：npm run pro-build