背景
前端开发都少不了对后台的调用，后台地址配置在哪里，是一个很纠结的问题 为此大家开动脑筋，想了不少办法：
在代码中定义一个常量如baseUrl，后台请求时，统一拼上这个baseUrl； 问题：本地、开发、测试、生产环境地址不一样，得反复改地址；
前端与后台代码部署在一个域下，使用相对路径访问后台； 问题：开发阶段本地调试的时候，还是避免不了要用方案一来配置一个baseUrl，且这个改动与代码放在一起，一不小心就提交到代码库，CI打出来的包就不对了。
解决方案
只要是通过React和Vue脚手架创建的项目，都支持配置环境变量，使用方式：
定义环境变量
#React项目.env文件
REACT_APP_BASEURL=https://prod.utcook.com
#Vue项目.env文件
VUE_APP_BASEURL=https://prod.utcook.com
在代码中使用
import axios from 'axios';
const baseUrl = process.env.REACT_APP_BASEURL;
axios.get("${baseUrl}/api/user/list");
本地调试时，后台地址不一样怎么办？
有两种方式可以定义本地地址：
1. 通过.env.local文件：
#React项目.env.local文件
REACT_APP_BASEURL=http://192.168.1.123:8080
#Vue项目.env.local文件
VUE_APP_BASEURL=http://192.168.1.123:8080
2. 通过环境变量覆盖
WebStorm可以直接在"Run/Debug Configurations"->Enviroment里面指定
其它IDE也可以通过Windows或Linux的系统环境变量来指定
有多套环境怎么办？
React和Vue脚手架支持同样的mode机制：
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
# 优先级越往下越高
mode与npm脚本的对应规则：
npm run build默认production模式(.env.production)
npm run start或npm run serve默认development模式(.env.development)
npm run test默认test模式(.env.test)
React和Vue的脚手架，同样都为我们设计好了git的忽略规则：
# React脚手架生成的.gitignore
.env.local
.env.development.local
.env.test.local
.env.production.local
# Vue脚手架生成的.gitignore
# local env files
.env.local
.env.*.local
我们可以在.env中配置所有变量的默认值，在对应mode的配置文件中配置不同环境的变量；
如果有开发、测试、生产多套环境，可以在对应的CI脚本里面配置环境变量去覆盖；
更多信息，请参考本文档最后的链接。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！