最近碰到了这个需求。
因为之前，碰到这种情况有两种，一个是这种配置信息是存在后端的，每次会调接口获取，所以前端也不需要区分。
另一种就是写在前端的配置里面，如果你这个配置不区分环境的话，那么每次上线你都要改成线上的配置。。。
如果我们用配置文件配好，生产环境和测试环境加载不同的文件，这样就方便很多。。
.env文件
之前就在用这个文件，因为在这个文件里面配置PORT，然后启动webpack的代理服务器就会切换到对应的端口。
PORT=3601
在多个项目开发的情况下，我把每个项目设置一个单独固定的端口（不然所有项目都是3000，会冲突），这样你项目的局域网地址就固定了，ip是和机器mac绑定的。这样给别人调试就比较方便。
也可以加一下自定义的环境变量，但是需要以REACT_开头
比如oss服务器的地址
REACT_APP_OSS_BUCKET = xxxxx
然后我们在前端代码里面，可以通过process.env.REACT_APP_OSS_BUCKET来使用。
在执行yarn build 的时候，process.env.REACT_APP_OSS_BUCKET会被替换成.env.production中的变量。
区分开发环境和生产环境
creat-react-app默认似乎是支持生产环境和开发环境的
我们使用.env和.env.production，其中.env.production是执行build命令时候加载的。
但是我们需要build的时候区分测试环境和生产环境
这时候我们可以用一些命令行工具帮助我们加载环境变量
cross-env
这个命令行工具是支持载入环境变量的。
比如我们在package.json的start脚本里面可以配置环境变量
"start":"cross-env REACT_APP_OSS_BUCKET = xxxxx react-scripts start"
或者直接命令行执行也可以
cross-env的主要作用是可以跨平台设置环境变量。
因为windows，mac，linux设置环境变量是有区别的，使用这个命令行就可以帮我们处理这个差异。
比如windows powershell环境设置环境变量是$env:REACT_APP_OSS_BUCKET=xxx
dotenv-cli
这个命令行可以加载dotenv(.env文件）中的环境变量。
配置比较多的情况用这个比较合适。
我们先安装这个命令
yarn add dotenv-cli -D
然后我们在package.json里面build命令的部分用dotenv载入变量就可以实现区分环境里
"build:test": "dotenv -e .env.test react-scripts build"
