React-scripts start开发环境中使用.env文件遇process未定义问题求助

别慌，Create React App（CRA）的开发环境完全支持使用.env文件，你遇到的process is not defined问题大概率是配置细节没踩对，我帮你一步步排查解决：

一、先明确CRA的环境变量核心规则（必看） #

这是很多人踩坑的关键点，CRA对自定义环境变量有强制要求：

• 所有自定义环境变量必须以REACT_APP_开头，比如REACT_APP_API_BASE=http://localhost:3001，不带这个前缀的变量会被自动忽略
• .env系列文件必须放在项目根目录（和package.json同级），不能放在src或其他子文件夹里
• 修改.env文件后，必须重启react-scripts start，新的变量才会生效

二、排查"process is not defined"的常见原因 #

1. 变量未加REACT_APP_前缀 #

如果你定义的是API_BASE而不是REACT_APP_API_BASE，CRA不会把这个变量注入到前端代码中，直接访问process.env.API_BASE时，整个process对象都不会被注入，自然会抛出未定义错误。

2. 使用场景错误 #

CRA的环境变量是在开发服务器启动/构建阶段注入到静态代码中的，只能在前端业务代码（比如.js/.jsx/.ts文件）中使用，不能在package.json或者未自定义的webpack配置文件中直接访问process.env。

3. CRA 5.x版本的webpack 5兼容性问题 #

如果你用的是CRA 5.x，它底层依赖webpack 5，而webpack 5不再自动全局注入process对象。这时候可以：

• 优先使用import.meta.env.REACT_APP_XXX（CRA 5.x原生支持，更符合ES模块规范）
• 如果坚持用process.env，可以在public/index.html中添加一段全局定义：

  <script>
    window.process = { env: %REACT_APP_ENV% };
  </script>
  

三、关于env-cmd的正确配置 #

你用env-cmd的思路是对的，但要注意几个细节：

• 确保.env.development在项目根目录，里面的变量同样要加REACT_APP_前缀
• 检查package.json的脚本配置是否正确：

  "scripts": {
    "start": "env-cmd -f .env.development react-scripts start"
  }
  

• 若仍报错，尝试清除缓存：删除node_modules/.cache文件夹，或者直接运行npm start -- --reset-cache

四、验证环境变量是否生效的方法 #

在你的React组件里加一段测试代码：

// CRA 4.x及以下
console.log('环境变量测试:', process.env.REACT_APP_TEST_VAR);
// CRA 5.x推荐写法
console.log('环境变量测试:', import.meta.env.REACT_APP_TEST_VAR);

重启开发服务器后打开浏览器控制台，如果能打印出变量值，说明配置已经成功了。

最后梳理一遍正确流程 #

1. 在项目根目录创建.env.development文件
2. 写入带前缀的变量：REACT_APP_MY_VAR=hello_dev
3. 配置启动脚本（用env-cmd或直接用默认的react-scripts start，CRA会自动加载.env.development）
4. 重启开发服务器
5. 在组件中用process.env.REACT_APP_MY_VAR或import.meta.env.REACT_APP_MY_VAR访问变量

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