开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第39天，点击查看活动详情

写在前面

本篇是react学习的第七篇，介绍如何在react项目中添加自定义环境变量，配置开发环境和生产环境

添加自定义环境变量

项目打包

create-react-app只是我们开发项目用的一个脚手架，等项目开发完成后，我们需要把项目发布到线上环境，以供测试人员测试以及供用户使用

我们在现在的项目终端输入打包命令：npm run build，打包完成后项目中就多了一个build文件夹，该文件夹就是打包后的文件夹，打开该文件夹下的index.html文件，发现页面是空白的，打开控制台，好多文件报404错误，此时我们就需要配置一下，打开项目中的package.json文件，添加如下代码："homepage": "./",，保存后再在项目终端执行命令：npm run build，打包完成后，打开build文件夹下的index.html文件，和我们开发时的内容一样

自定义环境变量

为什么要自定义环境变量呢？因为我们一个项目的周期大致包括：1、确认需求；2、设计产品原型图；3、设计界面UI；4、项目开发；5、项目测试；6、项目验收上线。设计的开发的包括4、5、6，项目在测试的时候肯定会有bug反馈给开发，如果开发环境和测试环境是同一个，那么就会打乱测试的节奏，而且频繁更新也不利于进行项目测试，所以自定义环境变量必不可少，下面我们就开始配置开发环境和生产环境，开发环境用来开发，生产环境用来测试。

可以在项目根目录下添加名为.env.[name]的文件，文件中可以申明以REACT_APP_开头的任何环境变量。我们在根目录下创建.env.development文件（表示开发环境）和.env.production文件（表示生产环境），文件内容如下：

.env.development：

# just a flag
ENV = 'development'

# base api
REACT_APP_BASE_API = 'http://接口的开发环境ip:端口'

.env.production：

# just a flag
ENV = 'production'

# base api
REACT_APP_BASE_API = 'http://接口的生产环境ip:端口'

这样就配置好了，我们在终端输入命令npm start的时候会自动使用REACT_APP_BASE_API = 'http://接口的开发环境ip:端口'，我们在终端输入命令npm run build的时候会自动使用REACT_APP_BASE_API = 'http://接口的生产环境ip:端口'

写在最后

以上就是如何在react项目中添加自定义环境变量，配置开发环境和生产环境所有代码和说明