Create React App添加REACT_APP_前缀的环境变量仍返回undefined如何解决

1. 核心问题：环境变量名拼写错误 #

你在.env文件中定义的天气服务变量为REACT_APP_OWM_KEY，但在App.js的调用代码中写为process.env.REACT_APP_OMW_KEY，字母W和M顺序颠倒，自然无法读取到对应值。
解决方法：将App.js中的调用代码修改为process.env.REACT_APP_OWM_KEY即可。

2. .env文件存放位置不符合要求 #

Create React App默认只会读取项目根目录（和package.json同级的目录）下的.env文件，如果你将.env文件存放在src、public等子目录中，就会出现读取失败的问题。
解决方法：将所有.env相关文件移动到项目根目录，和package.json保持同级。

3. 服务未重启导致变更未生效 #

环境变量的配置只会在项目启动时加载，如果你是在项目运行过程中新增/修改的环境变量，不重启服务的话变更不会生效。
解决方法：停止当前运行的开发服务，重新执行对应的启动命令后再测试。

4. env-cmd配置规则匹配错误 #

你当前配置的start:staging和start:prod都是指定读取同一份.env文件，没有对应到拆分后的环境配置文件。实际上Create React App原生就支持按环境读取.env文件，无需额外安装env-cmd即可正常工作：

• 执行npm start默认读取.env.development的配置
• 执行npm run build默认读取.env.production的配置
  解决方法：如果要使用原生规则，可卸载env-cmd，把启动命令改回默认的"start": "react-scripts start"，重启服务即可。如果要保留env-cmd，需要把对应命令的配置文件路径修改正确：

"scripts": {
  "preinstall": "npx npm-force-resolutions",
  "start": "env-cmd -f .env.development react-scripts start",
  "build": "env-cmd -f .env.production react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

内容的提问来源于stack exchange，提问作者Patorikku