React中使用环境变量隐藏API Key失败，值为undefined求助

检查.env文件的位置与命名规则 #

• 确保.env文件放在项目根目录（和package.json同级），不能放在src或其他子目录下。
• 严格遵循变量名前缀要求：必须以REACT_APP_开头，确认拼写无大小写、下划线错误。

替换占位符并重启开发服务 #

• 将.env中的<API-KEY-GOES-HERE>替换为实际的API密钥，移除尖括号。
• 修改.env后必须重启开发服务器（终止npm start后重新启动），create-react-app仅在启动时加载环境变量，运行中修改不生效。

排查多环境文件冲突 #

• 若存在.env.local、.env.development等环境文件，确认这些文件未覆盖或错误设置REACT_APP_API_KEY变量。

验证环境变量加载状态 #

• 在组件中添加测试代码：console.log(process.env.REACT_APP_API_KEY)，重启服务后查看控制台输出，确认是否能正常打印密钥。
• 检查.env文件语法：变量名后无多余空格，若密钥含特殊字符，可尝试用双引号包裹（如REACT_APP_API_KEY="your-key-with-special-chars"）。

更新react-scripts版本 #

• 若使用旧版create-react-app，可能存在环境变量支持问题，执行npm update react-scripts更新依赖。

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