vue不同环境，请求不同环境的接口。

1、介绍

开发过程中，根据项目要求，后台部署了三个环境的接口，分别是：开发环境（开发时请求）、测试环境（部署测试环境请求）、生产环境（部署到线上环境请求），我们分别把他们称之为：开发环境(development)、测试环境(test)、生产环境(production)。

2、.env文件

注意：请仔细阅读下方文字！！！

.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略

3、创建.env文件

3.1在项目根目录创建以下文件

这三个文件分别代表：开发、测试、生产，运行的.env文件

3.2 .env.development内容：

VUE_APP_BASE_URL = 'http://development'

3.3 .env.test内容：

VUE_APP_BASE_URL = 'http://test'

3.2 .env.production内容：

VUE_APP_BASE_URL = 'http://production'

4、修改启动命令，加载不同的.env文件。

4.1 打开package.json文件

4.2 在scripts下进行修改

绿框位置代表：当前命令加载的.env文件

//例：
 npm run serve //执行此命令 则运行 .env.development文件
 npm run test//执行此命令 则运行 .env.test文件
 npm run production//执行此命令 则运行 .env.production文件

5、获取环境变量

可以js文件中通过

console.log(process.env.VUE_APP_BASE_URL)
//开发环境打印
http://development
//测试环境打印
http://test
//生产环境打印
http://production