React项目中.env.local配置的process.env.API_KEY返回undefined如何解决？

云原生阿岚

2026-9-29

React读取.env.local环境变量返回undefined的解决办法

以下是对应问题的排查和解决步骤：

环境变量命名规则不符合要求
使用Create React App（CRA）搭建的项目，默认要求所有注入到前端代码的自定义环境变量必须以REACT_APP_为前缀，无此前缀的变量会被自动过滤，无法在业务代码中读取。
解决方法：将.env.local中的变量名修改为REACT_APP_API_KEY，代码中调用对应修改为process.env.REACT_APP_API_KEY。
环境变量配置格式错误
你当前的配置中等号前后存在多余空格，会导致读取到的变量值附带不必要的空格，甚至读取失败，需去掉等号前后的空格。
配置修改后未重启开发服务
环境变量的修改不会触发热重载，修改.env系列文件后必须手动重启本地开发服务，新配置才会生效。
文件存放位置错误
.env.local必须放在项目根目录，和package.json文件同级，不能存放在src或者其他子目录下。
特殊场景适配：Vite搭建的项目
如果你使用Vite创建React项目，环境变量需要以VITE_为前缀，调用方式为import.meta.env.VITE_API_KEY，同样需要重启开发服务生效。

修正后的代码示例

业务代码

async componentDidMount() {
    const link = `https://newsapi.org/v2/top-headlines?category=${this.props.category}&pagesize=${this.props.pagesize}&country=${this.props.country}&page=${this.state.page}&apiKey=${process.env.REACT_APP_API_KEY}`;
    this.setState({ loader: true });
    const data = await fetch(link);
    const final_data = await data.json();
    console.log(final_data);
}