React调用API时process未定义的环境变量问题解决方法

可能的原因及对应解决方法 #

1. 项目使用Vite而非Create React App（CRA） #

如果你的项目是Vite初始化的，Vite默认不支持process.env，需要改用import.meta.env：

• 修改.env文件中的变量名，前缀改为VITE_，比如VITE_REACT_APP_API_KEY=你的密钥
• 代码中替换为：

const getPopular = async () => {
  const api = await fetch(`https://api.spoonacular.com/recipes/random?apiKey=${import.meta.env.VITE_REACT_APP_API_KEY}&number=9`)
  const data = await api.json();
  console.log(data);
}

2. CRA版本兼容性问题（React 18+） #

若为CRA项目，部分新版本需额外配置启用process.env：

• 安装依赖：

npm install dotenv dotenv-expand --save-dev

• 在项目根目录创建config-overrides.js文件，添加：

const { override } = require('customize-cra');
const dotenv = require('dotenv');
const dotenvExpand = require('dotenv-expand');

module.exports = override((config) => {
  const env = dotenv.config();
  dotenvExpand.expand(env);
  return config;
});

• 修改package.json的启动命令：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

• 重启开发服务器

3. 检查.env文件语法 #

确保变量定义无多余空格或引号：

正确写法：REACT_APP_API_KEY=你的密钥
错误写法：REACT_APP_API_KEY = "你的密钥"（包含空格或引号）

4. 验证环境变量注入情况 #

在组件中添加console.log(process.env)，查看是否能输出REACT_APP_API_KEY：

• 若输出中无该变量，确认.env文件在项目根目录（而非src文件夹内），且文件名为.env（不是.env.local等环境特定后缀，除非你是针对特定环境配置）

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