React应用在生产环境中出现.env变量读取异常，会直接导致接口调用失败、功能不可用等问题，需要结合框架特性和部署流程逐步定位原因。
常见异常场景与排查步骤
1. 检查环境变量命名是否符合规范
React脚手架（Create React App）要求生产环境的环境变量必须以REACT_APP_为前缀，否则构建时不会被注入到应用中。如果变量名缺少该前缀，生产环境自然无法读取到对应值。
排查时可以检查.env文件中的变量定义，例如以下错误示例：
# 错误定义，缺少REACT_APP_前缀 API_BASE_URL=https://api.ipipp.com
正确的定义应为：
# 正确定义 REACT_APP_API_BASE_URL=https://api.ipipp.com
2. 确认环境变量文件是否被构建工具识别
不同后缀的.env文件对应不同的环境，生产环境默认读取.env.production文件，如果该文件不存在，或者同时存在.env和.env.production时优先级错误，也会导致变量读取异常。
Create React App的环境文件优先级从高到低为：
.env.${NODE_ENV}.local.env.${NODE_ENV}.env.local.env
生产环境NODE_ENV为production，因此优先读取.env.production和.env.production.local中的配置。
3. 验证构建时环境变量是否被正确注入
可以在构建完成后，检查打包产物中是否包含对应的环境变量。例如在构建后的JS文件中搜索REACT_APP_API_BASE_URL，如果找不到对应的值，说明构建阶段没有正确读取到变量。
同时可以在应用代码中添加临时日志输出，验证变量是否可访问：
// 临时添加日志查看变量值
console.log("当前API地址：", process.env.REACT_APP_API_BASE_URL);
4. 检查服务端部署配置
如果是通过Nginx、Docker等方式部署应用，部分部署方式支持运行时注入环境变量，此时需要确认部署配置是否正确传递了变量。例如Docker部署时，如果没有在启动命令中指定环境变量，即使构建了对应的配置也无法生效。
对应解决方案
方案1：修正环境变量命名与文件配置
确保所有生产环境需要的变量都以REACT_APP_为前缀，并且将生产环境专属配置放到.env.production文件中，避免和开发环境配置混淆。
方案2：确认构建命令与环境变量传递
构建生产包时需要显式设置NODE_ENV=production，如果是自定义构建脚本，需要保证该变量正确设置。如果使用CI/CD流程构建，需要在构建步骤中添加对应的环境变量。
正确的构建命令示例：
# 构建生产包 NODE_ENV=production npm run build
方案3：运行时注入环境变量适配
如果需要在部署时动态修改环境变量，而不是打包时固定，可以使用envsubst等工具，在容器启动时替换打包产物中的占位符。例如先定义占位符变量：
// 配置中使用占位符 const API_URL = "__API_BASE_URL__";
然后在Docker启动脚本中替换占位符：
# Docker启动脚本中替换占位符 envsubst < /usr/share/nginx/html/static/js/*.js > /tmp/temp.js && mv /tmp/temp.js /usr/share/nginx/html/static/js/main.js
方案4：排查缓存与构建残留
有时候旧的构建缓存会导致环境变量没有更新，可以删除node_modules/.cache目录和build目录后重新构建，再部署新的包。
注意事项
不要将敏感信息（如密钥、数据库密码）直接写在.env文件中，即使以REACT_APP_为前缀，这些变量也会被打包到前端代码中，存在泄露风险。敏感配置建议通过服务端接口下发，或者使用服务端环境变量配合后端转发。
另外，修改.env相关文件后需要重新构建应用，前端应用的环境变量是在构建阶段注入的，运行时修改.env文件不会生效。