多环境变量的配置

1.环境变量的三个环境

开发环境 development   使用 npm run serve 启动

测试环境 test   使用 npm run test 启动

上线环境 production   使用 npm run build 进行打包

2.为什么要配置环境变量

修改方便，无需重启项目，无需改代码

3.环境变量配置的要求

 以 VUE_APP_ 开头，可以通过 process.env.VUE_APP_ 访问。
 比如,VUE_APP_ENV = 'development' 通过process.env.VUE_APP_ENV 访问。
 除了 VUE_APP_* 变量之外，还有两个特殊的变量 NODE_ENV 和 BASE_URL
 

4.多环境变量的配置

(1). 在 package.json 中的 scripts 里设置多个环境变量

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test":"vue-cli-service --mode test"
  },

(2).1.新建 .env.development 文件写开发环境设置

NODE_ENV = "development"
 
VUE_APP_BASE_URL = "开发环境的请求网址的公共代码段"

     2.新建 .env.test 文件写测试环境设置

VUE_APP_BASE_URL = "测试环境的请求代码段"

    3.新建 .env.production 文件写上线环境测试

VUE_APP_BASE_URL = "上线环境的请求代码段"

(3). 修改给axios请求配置请求公共代码

const server = axios.create({
    baseURL:process.env.VUE_APP_BASE_URL,
    timeout: 6000
})

5.注意事项：

1 所有单词都是固定属性，不能修改

2 配置完成后需要重新启动一下项目