React.js中Firebase配置读取环境变量不生效问题

硬编码配置正常、读取环境变量异常，本质是环境变量没有被脚手架正确注入、或者读取到的值和预期不一致，按以下顺序逐一排查即可：

• 确认.env文件存放位置
  文件必须放在项目根目录，和package.json处于同一层级，放在src、public等子目录下不会被脚手架识别加载。
• 确认修改环境变量后重启了开发服务
  Create React App的环境变量是在项目启动构建阶段静态注入的，开发过程中修改.env不会触发热更新，必须手动终止当前运行的npm start/yarn start进程，重新执行启动命令，新的环境变量才会生效。
• 检查.env文件格式是否正确
  • 所有自定义环境变量必须以REACT_APP_开头，你当前的变量命名前缀符合要求，注意核对不要出现拼写错误、大小写错误、下划线漏写的问题；
  • 变量赋值时不要给值加引号，比如不要写成REACT_APP_API_KEY="你的key"，引号会被当成变量值的一部分，直接导致Firebase鉴权失败；
  • 赋值等号两侧不要加空格，不要写成REACT_APP_API_KEY = 你的key，多余空格会导致解析出的变量名、值不符合预期。
• 验证变量读取结果
  可以在Firebase.init.js中加入临时打印代码，确认实际读取到的值：

  // 临时调试用，排查完可以删掉
  console.log('环境变量读取结果', {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_PROJECT_ID
  })
  

  如果打印结果里某个字段是undefined，回到前面几个步骤重新核对；如果打印出的值和你之前硬编码的内容完全一致，再检查是不是复制值的时候多带了首尾空格、漏抄了部分字符。

补充：如果你是用Vite搭建的React项目，读取规则和Create React App不同：环境变量需要以VITE_为前缀，读取时要用import.meta.env.VITE_xxx而非process.env.REACT_APP_xxx。

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