区分axios在开发环境和生产环境的请求基础地址

一、为什么会有环境变量之分?

从上图可以看出，开发环境实际上就是在自己的本地开发或者要求不那么高的环境，但是一旦进入生产，就是真实的数据。

前端主要区分两个环境,开发环境,生产环境

二、两个环境发出的请求地址是不同的，用什么区分呢?

1、环境变量

$ process.env.NODE_ENV 
1

当NODE_ENV值当为production时为生产环境，值为development时为开发环境

2、环境文件

可以在.env.development和.env.production文件中定义变量，变量自动就为当前环境的值，当是开发环境时，会去读.env.development，当是生产环境时会去读.env.production

基础模板在以上文件定义了变量VUE_APP_BASE_API，该变量可以作为axios请求的baseURL

在.env.development文件中，变量VUE_APP_BASE_API的值为/dev-api；

在.env.production文件中，变量VUE_APP_BASE_API的值为/prod-api

但是我们的开发环境代理是/api，所以可以统一下

# 开发环境的基础地址和代理对应
VUE_APP_BASE_API = '/api'
1
2

# 这里配置了/api,意味着需要在Nginx服务器上为该服务配置 nginx的反向代理对应/prod-api的地址 
VUE_APP_BASE_API = '/prod-api' 
1
2

我们这里生产环境和开发环境设置了不同的值，后续我们还会在生产环境部署的时候，去配置该值所对应的反向代理，反向代理指向哪个地址，完全由我们自己决定，不会和开发环境冲突