react配置环境变量

前端项目开发一般会区分三个环境：

• 本地环境（及开发环境）— development，
• 测试环境 — test，
• 生产环境 — production。

本地环境就是自己开发调试用的，一般是node起一个本地的服务，用webpack做接口请求的转发。测试环境和生产环境都是部署到服务器上的，连的不同的后台服务。一般在测试环境测试功能没问题了就会推送到生产环境。本项目中我图省事只区分了开发环境和生产环境，及只有development和production两个环境， test和development合并为development了。

一、建立.env文件

如图所示，分别建立.env.development和.env.production两个文件，文件内容为REACT_APP_ENV = 'XXX'。命名最好严格保持一致，react只能识别到以REACT_APP开头的属性作为环境变量。

二、安装cross-env包并配置package.json

npm install cross-env

在scripts中分别定义prod和dev的build命令，设置对应的环境变量。

三、如何部署

我这里用的是jenkins自动化部署，里面可以内置脚本指定运行build:dev还是build:prod

四、如何在代码中使用环境变量

有个很常见的使用场景是，需要根据环境变量配置不同的请求路径。比如在测试环境中，我们连的后端接口url中有一个test, 但是生产环境的就没有。此时我们可以直接使用process.env.REACT_APP_ENV这个属性来判断：