React中DotEnv配置环境变量无效，仅获取默认变量求助

我来帮你搞定这个头疼的问题！Create React App（CRA）对环境变量的使用有几个硬性规则，你大概率是没满足这些要求，下面一步步排查：

• 必须以REACT_APP_为前缀命名变量
  这是CRA的核心规则！所有自定义环境变量必须以REACT_APP_开头，比如你要定义API地址，不能写API_URL，得写成REACT_APP_API_URL。CRA会自动过滤掉所有没有这个前缀的变量，只保留NODE_ENV、PUBLIC_URL这些默认变量，这也是你只能拿到那两个值的最常见原因。

• 确认.env文件的位置正确
  .env文件必须放在项目的根目录，也就是和package.json、src、public文件夹同级的位置。如果把它放在src或者其他子文件夹里，CRA根本找不到它，自然读不到变量。

• 修改后必须重启开发服务器
  CRA只会在启动开发服务器（npm start/yarn start）的时候加载环境变量，热更新不会重新读取.env文件。所以你修改完.env后，一定要关掉当前的服务进程，重新启动一次。

• 检查环境变量文件的优先级
  CRA会根据不同环境加载对应的文件，优先级从高到低是：.env.local > .env.development/.env.production > .env。比如开发环境下，.env.development里的变量会覆盖.env里的同名变量，而.env.local又会覆盖前两者。如果你不小心在.env.local里定义了同名变量，可能会覆盖你想要的设置。

• 正确的变量获取方式
  在代码里要通过process.env.REACT_APP_XXX来获取变量，比如：

  console.log(process.env.REACT_APP_API_URL);
  

  注意变量名是大小写敏感的，别写错了！

• 升级react-scripts到最新版本
  旧版本的CRA可能存在环境变量解析的bug，建议升级到最新稳定版：

  npm install react-scripts@latest
  # 或者用yarn
  yarn upgrade react-scripts@latest
  

举个完整的例子：
你的根目录下的.env文件内容：

REACT_APP_API_BASE=https://api.myapp.com
REACT_APP_APP_TITLE=我的React应用

然后在组件中使用：

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>{process.env.REACT_APP_APP_TITLE}</h1>
      <p>API地址：{process.env.REACT_APP_API_BASE}</p>
    </div>
  );
}

export default App;

按照上面的步骤排查，应该就能正常读取自定义环境变量了！

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