环境变量都有什么

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

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

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

为什么要配置环境变量
修改方便，无需重启项目，无需改代码

环境变量配置的要求

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

如何配置多环境变量

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

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

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

NOOE_ENV = “development”

VUE_APP_BASE_URL = “开发环境的请求网址的公共代码段”

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

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

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

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

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

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

注意事项：

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

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