Vue项目如何区分开发还是生产环境切分不同环境接口 （环境识别）

1.为什么要配置不同的接口地址
目前，由于我在开发过程中，前端请求访问的是我本机启动的后台服务，此时涉及到跨域（因为端口不一样），所以就在config/index.js文件中配置了代理，如下：

意思就是说凡是以api开头的请求，会帮我转到8089端口去获取数据。所以前端的请求都统一写成'api'+'接口名'

但是在生产环境下，我们不需要在接口前面加api发送请求，所以我们需要判断开发环境和生产环境，然后写相应接口。

2.具体配置
在项目中找到以下两个文件：

config/dev.env.js  和  config/prod.env.js

2.1  在config/dev.env.js文件中加入一行代码：API_ROOT: ' "//localhost:8080/api" '
       

2.2  在config/prod.env.js文件中加入一行代码： API_ROOT: ' "" '
       

3.在src/main.js文件中配置全局变量（挂在vue原型上）
    process.env是一个全局变量，能够判断当前环境。

    所以在axios请求的时候，可以直接用this.baseURL+api :

.env 默认全局配置文件
.env.development 开发环境配置文件
.env.production 生产环境配置文件
 
文件名为Vue的约定，不可随意更改
 
配置环境变量格式
 
VUE_APP_{自定义环境变量名} = {值}
 
其中“VUE_APP_”是规定的环境变量名前缀，如果变量名不是以此开头，则在程序中不能调用此环境变量
 
 
例如在.env文件中写入：
VUE_APP_UserNumber = 12345
VUE_APP_UserString = "ABCDE"
XJL = "XJL"
process是nodeJs的全局变量，其中包含了env的属性，Vue项目启动时会自动读取.env文件中的环境变量

 
即可在Vue.js中可如此调用:
console.log(process.env.VUE_APP_UserNumber);
console.log(process.env.VUE_APP_UserString);
console.log(process.env.XJL);
 

运行后，console输出:

12345
ABCDE
undefined
Vue 源码会根据 process.env.NODE_ENV 决定是否启用生产环境模式，默认情况为开发环境模式。在 webpack 与 Browserify 中都有方法来覆盖此变量，以启用 Vue 的生产环境模式，同时在构建过程中警告语句也会被压缩工具去除。

 
如果是开发模式，Vue会自动读取.env和.env.development两个文件，.env.development文件内定义的环境变量会覆盖.env文件内同名的环境变量;如果是生产环境则是.env.production 文件内定义的环境变量会覆盖.env文件内同名的环境变量.
 
例如：
.env文件内容
VUE_APP_UserNumber = 12345
VUE_APP_UserString = "ABCDE"
VUE_APP_From = ".env"
 

.env.development文件内容

VUE_APP_From = ".env.development"
 

.env.production文件内容

VUE_APP_From = ".env.production"
 

在Vue.js中可如此调用:

console.log(process.env.VUE_APP_UserNumber);
console.log(process.env.VUE_APP_UserString);
console.log(process.env.From);
 

开发模式下输出：

12345
ABCDE
.env.development
 

生产模式下输出:

12345
ABCDE
.env.production