VS Code无法识别OpenAI API环境变量及Vercel部署报错求助

问题描述 #

我开发了一个依赖OpenAI API密钥环境变量的网站，本地VS Code运行正常，上传到GitHub并部署到Vercel后初期也没问题。但几天后开始报错：

"The OPENAI_API_KEY environment variable is missing or empty; either provide it, or instantiate the OpenAI client with an apiKey option, like new OpenAI({ apiKey: 'My API Key' })"

本地环境当前异常：.env文件配置为OPENAI_API_KEY=sk-my-key，此前能正常读取，现在只有终端手动传入密钥才能运行，VS Code无法识别.env里的密钥。试过移动.env文件、重建文件、复制代码目录都无效，后端文件已配置dotenv。

相关代码：

import dotenv from "dotenv";
dotenv.config();

console.log("OPENAI_API_KEY:", process.env.OPENAI_API_KEY); // 调试用

import openaiPkg from "openai";
const openaiApiKey = process.env.OPENAI_API_KEY;  

const { Configuration, OpenAIApi } = openaiPkg;

if (!openaiApiKey) {
  console.error('OPENAI_API_KEY is not set');
  // 密钥未设置则关闭后端
  process.exit(1);
}

const openai = new openaiPkg({
  apiKey: openaiApiKey,
});

export default openai;

排查步骤与解决方案 #

1. 检查.env文件基础配置 #

• 确保.env文件放在项目根目录（与package.json同级），不要嵌套在子文件夹中
• 文件名严格为.env，不能加后缀（如.env.local或.env.dev，除非在dotenv.config()中显式指定路径）
• 查看.gitignore，确认没有误将.env加入忽略列表（本地运行不受GitHub上传影响，但需保证文件存在）

2. 修正dotenv加载逻辑 #

• 确保dotenv.config()在所有读取process.env的代码前执行，当前代码导入顺序没问题，但如果有其他文件提前读取环境变量需同步检查
• 显式指定.env路径，避免路径识别偏差：

  dotenv.config({ path: './.env' });
  

3. 修复VS Code环境变量加载问题 #

• 完全重启VS Code：编辑器缓存可能导致环境变量不更新，关闭后重新打开
• 重启终端：终端不会自动刷新.env内容，修改文件后必须重启终端再运行项目
• 安装DotENV插件：辅助VS Code识别.env文件，自动加载环境变量到编辑器上下文

4. Vercel部署环境排查 #

• 登录Vercel后台，进入项目Settings > Environment Variables，检查OPENAI_API_KEY是否存在、值是否正确，是否被意外删除或修改
• 手动触发重新部署：Vercel有时不会自动刷新环境变量，重新部署确保配置生效
• 禁止上传.env到GitHub：敏感信息需通过Vercel后台单独配置，.env必须加入.gitignore

5. 代码额外校验 #

• 检查是否有其他代码覆盖process.env.OPENAI_API_KEY，比如存在process.env.OPENAI_API_KEY = ''这类赋值语句
• 更新dotenv版本：旧版本可能存在兼容性问题，执行npm update dotenv升级到最新版

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