如何为create-react-app配置环境变量？部署时自定义变量无法读取

• .env文件位置错误：create-react-app要求.env文件必须放在项目根目录（和package.json同级），而非src目录下。CRA会自动识别根目录的环境变量文件，无需手动引入。
• 错误的引入方式：不需要用require('../.env')加载环境变量，CRA在构建或启动开发服务时，会自动将符合命名规则的变量注入到process.env中。
• 未重启开发服务器：修改.env文件后，必须重启React开发服务器，新的环境变量才能生效。

正确操作步骤 #

1. 将.env文件移动到项目根目录（和package.json、node_modules同级）
2. 确保变量名以REACT_APP_开头，示例：

   REACT_APP_USERNAME="TESTNAME"
   

3. 关闭当前开发服务器，重新执行npm start启动服务
4. 在组件中直接通过process.env.REACT_APP_USERNAME访问变量，示例：

   console.log(process.env.REACT_APP_USERNAME)
   

补充：生产环境部署时，CRA会将这些变量静态替换到代码中，所以部署前要确保.env文件的变量配置正确，且构建过程能读取到该文件。

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