React项目读取.env环境变量返回undefined的问题排查

• .env文件存放位置不符合要求
  Create React App 脚手架默认只会读取项目根目录（与package.json同级目录）下的.env文件，存放在源码目录等其他位置的.env不会被加载解析。
• 环境变量配置语法错误
  你当前写的配置REACT_APP_API_URL = http://localhost:5000/在等号两侧加了多余空格，dotenv解析规则中等号前后不能存在空格，正确写法为：

  REACT_APP_API_URL=http://localhost:5000/
  

  空格会导致键值对解析失败，变量无法被正确注入。
• 新增/修改.env后未重启开发服务
  CRA的环境变量是在启动开发服务、执行构建命令的阶段静态注入到打包代码中的，开发过程中热更新不会监听.env文件的变动，新增或修改配置后必须终止当前运行的启动进程，重新执行npm start/yarn start命令才能加载新的环境变量。
• 变量命名不符合CRA的暴露规则（你的变量前缀符合要求，可作为通用排查项）
  出于安全考虑，CRA只会将以REACT_APP_开头的自定义环境变量暴露给前端代码，其余不带该前缀的变量会被过滤，无法通过process.env读取。

如果以上配置都修正后还是无法读取，可以删除项目下的node_modules/.cache缓存目录后再重启服务，排除构建缓存导致的加载异常。

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