Vercel AI SDK 在 Vite 环境中 API Key 加载问题的解决方案

问题背景

在使用 Vercel AI SDK 开发 Vue 应用时，很多开发者会遇到一个常见问题：当应用通过 Vite 构建时，loadApiKey 方法会抛出 "API Key Missing" 错误。这个问题特别容易出现在前端代码中直接调用 AI 服务的情况下。

核心问题分析

这个问题的根源在于环境变量加载机制的不同：

1. 环境变量访问方式差异：Vite 使用 import.meta.env 来访问环境变量，而传统 Node.js 应用使用 process.env。AI SDK 内部默认使用的是 Node.js 的方式。

2. 前端安全性限制：浏览器环境无法直接访问系统环境变量，这是出于安全考虑的设计。任何敏感信息如 API Key 都不应该直接暴露在前端代码中。

3. 构建时变量替换：Vite 会在构建时替换 import.meta.env 变量，但不会处理 process.env 的引用。

解决方案

方案一：直接传递 API Key

最直接的解决方案是在创建 AI 客户端时显式传递 API Key：

import { createGoogleGenerativeAI } from '@ai-sdk/google';

const googleAI = createGoogleGenerativeAI({
  apiKey: 'your-api-key-here' // 直接传入 API Key
});

方案二：使用 Vite 环境变量

如果你确实需要使用环境变量，确保：

1. 环境变量以 VITE_ 前缀开头
2. 通过 import.meta.env 访问

import { createGoogleGenerativeAI } from '@ai-sdk/google';

const googleAI = createGoogleGenerativeAI({
  apiKey: import.meta.env.VITE_GOOGLE_API_KEY
});

方案三：服务端代理（推荐）

最佳实践是将 AI 相关调用放在服务端：

1. 创建 API 路由处理 AI 请求
2. 在服务端加载环境变量
3. 前端通过 HTTP 调用这些 API

// 服务端代码 (Node.js)
import { createGoogleGenerativeAI } from '@ai-sdk/google';
import dotenv from 'dotenv';

dotenv.config();

const googleAI = createGoogleGenerativeAI({
  apiKey: process.env.GOOGLE_API_KEY
});

// 然后暴露 API 端点供前端调用

安全注意事项

1. 永远不要将真实的 API Key 提交到版本控制系统
2. 使用 .env.local 文件并在 .gitignore 中忽略它
3. 对于生产环境，使用平台提供的 secrets 管理功能
4. 考虑为前端实现速率限制和权限控制

总结

在 Vite 构建的 Vue 应用中使用 Vercel AI SDK 时，理解环境变量的加载机制至关重要。直接在前端代码中暴露 API Key 存在安全风险，推荐采用服务端代理的方式。如果必须在前端使用，确保通过正确的 Vite 环境变量机制加载，并采取适当的安全措施。

通过以上方案，开发者可以既保持开发便利性，又确保应用的安全性，顺利在 Vite 环境中集成 AI 功能。