React项目中无法访问.env变量问题求助

排查及解决步骤 #

• 确认.env文件位置：必须放在项目根目录（与package.json同级），不能放在src或其他子文件夹内，对照你的项目结构检查位置是否正确，不对的话移到根目录。
• 检查变量命名：React自定义环境变量必须以REACT_APP_开头，你的REACT_APP_BACKEND_URL符合规范，这部分无需调整。
• 重启开发服务器：修改.env文件后，必须重启npm start这类开发服务，否则新变量不会生效。
• 正确访问变量：在src文件中通过process.env.REACT_APP_BACKEND_URL访问，注意拼写、大小写、下划线不要出错。
• 规范.env文件格式：确保内容无多余空格或引号，正确格式如下：

  REACT_APP_BACKEND_URL=http://localhost:5000
  

  避免等号前后加空格，或给变量值加引号。
• 非Create React App项目需额外配置：如果项目不是用Create React App创建的，需手动安装dotenv包，并在入口文件（如src/index.js）顶部添加：

  require('dotenv').config()
  

  Create React App默认集成了dotenv，无需此操作。

验证方式 #

在src任意组件中添加测试代码：

console.log(process.env.REACT_APP_BACKEND_URL);

重启服务器后查看控制台输出，验证变量是否正常读取。

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