React中如何正确存储API根URL？.env配置报错求解

可能的错误原因 #

• 未重启开发服务器：React启动后修改.env文件，必须重启npm start这类开发服务才能读取新变量，这是最常见的疏忽。
• .env文件位置不对：必须放在项目根目录（和package.json同级），放src或其他子文件夹里会被忽略。
• 文件命名错误：文件名必须是.env（注意开头的点），不能写成env或者.env.local这类非默认命名（除非你专门配置了环境区分）。
• 变量值带多余空格：比如REACT_APP_ROOT_URL= http://localhost:7000，等号后的空格会被包含进变量值，导致请求地址无效。
• 变量名拼写错误：虽然你的变量名REACT_APP_ROOT_URL符合规则，但如果不小心写错（比如少下划线、大小写错误），就会无法读取。

正确配置步骤 #

1. 在项目根目录（和package.json同一层级）创建.env文件
2. 在文件内写入配置，注意等号前后无空格：

   REACT_APP_ROOT_URL=http://localhost:7000
   

3. 重启你的React开发服务器（关闭当前的服务进程，重新执行npm start）
4. 在代码中通过process.env.REACT_APP_ROOT_URL调用变量，示例：

   // 发起API请求示例
   axios.get(`${process.env.REACT_APP_ROOT_URL}/api/users`)
     .then(response => console.log(response.data))
   

额外提示 #

• 区分环境的话，可以创建.env.development（开发环境）和.env.production（生产环境），create-react-app会自动根据当前环境加载对应文件，变量名仍需以REACT_APP_开头。
• 不要把.env文件提交到版本库，create-react-app默认的.gitignore已经包含了.env*规则，确保敏感信息不会泄露。

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