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

1.在c

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 :