ReactJS中Dotenv环境变量取值为undefined问题求助

云上老周

2026-6-27

React环境变量取值undefined的解决方法

问题重现

在React项目中设置了.env文件：

REACT_TEST="Test value"

但在组件中调用process.env.REACT_TEST时输出undefined：

function App() {
  const localstorege = () => {
    if (localStorage.getItem("auth")) return true;
    else return false;
  };
  console.log(process.env.REACT_TEST, "value"); // 输出undefined
  console.log(localstorege(), "local ");
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Login />} />
          <Route element={<PrivateOutlet user={localstorege()} />}>
            <Route path="/dashboard" element={<Dashborad />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

解决步骤

遵守命名规则：Create React App要求自定义环境变量必须以REACT_APP_开头，把.env里的变量改成：
```
REACT_APP_TEST=Test value
```
同时组件里的调用也要对应修改：
```
console.log(process.env.REACT_APP_TEST, "value");
```
重启开发服务器：修改.env后必须重启npm start/yarn start，否则新的环境变量不会被注入到应用中。
确认文件位置：.env文件必须放在项目根目录（和package.json同级），不能放在子文件夹内。
规范文件格式：.env里的变量值不需要加引号，直接写内容即可，避免格式问题导致读取失败。