React项目两种方式读取环境变量均返回undefined如何解决

你两种方式都读取到undefined的核心原因是：使用react-scripts启动的Create React App脚手架项目，默认会自动过滤所有不带REACT_APP_前缀的自定义环境变量，避免服务器端敏感变量意外泄露到前端浏览器代码中。

第一种（env-cmd方式）修复步骤 #

• 将.env.development文件内的变量全部添加REACT_APP_前缀：

REACT_APP_BACKEND_PROTOCOL = http
REACT_APP_BACKEND_DOMAIN = localhost
REACT_APP_BACKEND_PORT = 4000

• 代码中读取变量时同步添加前缀：

console.log(`${process.env.REACT_APP_BACKEND_PROTOCOL}://${process.env.REACT_APP_BACKEND_DOMAIN}:${process.env.REACT_APP_BACKEND_PORT}`);
console.log(process.env.REACT_APP_BACKEND_PROTOCOL);

• 无需修改启动命令，保持env-cmd -f .env.development react-scripts start即可，重启开发服务器后就能正常读取变量。

第二种（dotenv方式）修复说明 #

• Create React App已经内置了dotenv支持，不需要手动安装dotenv模块、也不需要手动导入调用config方法，额外的安装调用会和内置逻辑冲突。
• 你只需要把.env文件内的变量同样添加REACT_APP_前缀，代码中对应加前缀读取，直接执行react-scripts start启动项目就能正常取值。

注意事项 #

• 环境变量修改后必须重启开发服务器才会生效，不支持热更新。
• 所有带REACT_APP_前缀的变量最终都会被打包到前端静态代码中，不要在其中存储密钥、密码等敏感信息。

内容的提问来源于stack exchange，提问作者José Carlos