Create React App无法读取.env.development等环境文件问题排查

看起来你遇到的是Create React App（CRA）无法加载指定环境配置文件的问题，我帮你梳理几个关键排查点和解决办法：

1. 再次确认核心规则：变量前缀必须是REACT_APP_ #

虽然你提到已经添加了前缀，但再仔细核对下你的.env.development内容，必须是这样的格式：

REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_CALLBACK_URL=http://localhost:3005/callback

CRA会自动忽略所有不带REACT_APP_前缀的自定义变量，这是官方的强制规则，哪怕你用了指定环境的配置文件也不例外。

2. 检查启动脚本的环境变量传递 #

你的start脚本用了npm-run-all并行启动服务端和客户端，这里可能存在两个问题：

（1）显式指定NODE_ENV #

虽然react-scripts start默认会把NODE_ENV设为development，但在复杂的脚本组合中，有时候环境变量会丢失或被覆盖。建议在client:start脚本里显式声明NODE_ENV：

"client:start": "export NODE_ENV=development && export PORT=3005 && react-scripts start"

如果是Windows系统，把export换成set；想要跨平台兼容的话，可以安装cross-env包，然后写成：

"client:start": "cross-env NODE_ENV=development PORT=3005 react-scripts start"

（2）单独测试客户端启动 #

先暂时跳过npm-run-all的并行启动，直接运行：

npm run client:start

然后在src/index.js里打印具体的变量（而不是整个process.env）：

console.log('API_URL:', process.env.REACT_APP_API_URL);
console.log('CALLBACK_URL:', process.env.REACT_APP_CALLBACK_URL);

如果这时候能正确输出值，说明问题出在npm-run-all的并行启动逻辑上——可能是服务端脚本修改了环境变量，或者并行启动时的环境隔离导致客户端没读到配置。

3. 清除CRA的缓存 #

CRA会缓存环境变量以提升构建速度，有时候旧的缓存会导致新配置不生效。你可以通过以下方式清除缓存：

• 运行带重置缓存参数的启动命令：

  npm run client:start -- --reset-cache
  

• 手动删除node_modules/.cache目录，然后重新启动服务。

4. 核对配置文件的命名和路径 #

确保.env.development和.env.production文件放在项目根目录（和package.json、src文件夹同级），文件名完全正确：

• 不要写成.env.dev或.env.devel
• 注意大小写（比如.Env.Development是无效的，CRA对文件名大小写敏感）

5. 检查生产环境的构建脚本 #

如果是生产环境构建时读不到.env.production，确认你的build脚本是react-scripts build——这个命令默认会把NODE_ENV设为production，自动加载.env.production和.env文件。

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