ReactJS开发环境下环境变量为undefined问题排查求助

你当前的package.json scripts配置是create-react-app的默认配置，不需要额外修改，按以下步骤排查即可：

• 检查.env文件编码与命名
  • 确认文件后缀确实为.env，不是.env.txt等带隐藏后缀的文件（Windows系统可在文件管理器顶部开启「文件扩展名」显示校验）
  • 确认文件编码为UTF-8 无BOM格式，可通过VS Code右下角的编码标识查看修改
• 排查dotenv配置冲突
  create-react-app已内置环境变量解析逻辑，如果你手动安装了dotenv包并自行添加了相关解析配置，会导致内置逻辑冲突，卸载额外安装的dotenv包、删除手动添加的dotenv配置后重启服务即可。
• 检查eject后的配置完整性
  如果你之前执行过yarn eject操作，需要确认config/env.js文件中的环境变量读取逻辑未被篡改，默认逻辑会自动加载根目录下的.env、.env.local、.env.development、.env.development.local文件，修改回默认配置即可正常读取。
• 优化.env变量定义格式
  去掉变量定义中等号两侧的空格，改为REACT_APP_SOMETHING=something格式，避免部分解析器对空格兼容异常导致读取失败。
• 临时脚本校验
  可临时修改start脚本测试环境变量注入逻辑是否正常：

  "scripts": {
    "start": "REACT_APP_TEST=test react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  

  启动服务后打印process.env.REACT_APP_TEST，如果可以正常输出test，则确认注入逻辑正常，问题出在.env文件本身的读取环节，按前三个步骤排查即可。

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