React应用中.env环境变量通过process.env访问返回undefined

• 基于Create React App（CRA）构建的React项目默认只会自动加载固定命名的环境变量文件，你自定义命名的keys.env不会被默认识别加载。

方法1：修改为CRA默认识别的文件名（操作最简单） #

把你项目根目录的keys.env重命名为.env即可，CRA会自动加载根目录下该文件的环境变量。
修改后重启开发服务器，就能通过process.env.REACT_APP_TEST_KEY正常获取到值。

方法2：配置启动命令加载自定义文件名的env文件 #

如果你需要保留keys.env的命名，可以安装env-cmd工具来指定加载自定义的环境变量文件：

1. 安装依赖：

npm install env-cmd --save-dev

2. 修改package.json里的scripts配置，指定加载keys.env：

"scripts": {
  "start": "env-cmd -f keys.env react-scripts start",
  "build": "env-cmd -f keys.env react-scripts build",
  "test": "env-cmd -f keys.env react-scripts test"
}

3. 重启开发服务器即可正常读取变量。

• 所有要在React前端代码中访问的环境变量，必须以REACT_APP_为前缀，你当前的变量命名已经符合要求，不需要修改。
• 每次修改env文件内容或者配置后，都需要重启开发服务器才会生效。

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