Nuxt 3 项目中集成 AI API 实现智能内容生成与多语言翻译

1天前

随着大语言模型（LLM）技术的飞速发展，越来越多的 Web 应用开始集成 AI 能力——从智能客服、内容摘要到自动翻译，AI 正在重塑前端开发的工作方式。对于使用 Nuxt 3 构建全栈应用的开发者来说，如何在项目中安全、高效地调用 AI API 是一个值得深入探讨的话题。本文将带你一步步实现在 Nuxt 3 项目中集成 OpenAI 兼容 API，完成智能内容生成与多语言翻译功能。

一、为什么选择服务端调用

在 Nuxt 3 项目中调用 AI API，首要考虑的是安全性。所有主流 AI 服务（OpenAI、Claude、DeepSeek 等）都要求通过 API Key 进行身份认证。如果将 API Key 写在前端代码中，任何人都能通过浏览器开发者工具获取你的密钥，造成严重的安全隐患和费用损失。

Nuxt 3 的 server/api 目录提供了完美的解决方案：API 路由运行在服务端（Nitro 引擎），API Key 存储在 .env 环境变量中，前端通过 $fetch 调用自己的接口，再由服务端转发请求到 AI 服务。这样 API Key 永远不会暴露给客户端。

二、环境准备

首先在 Nuxt 3 项目根目录创建 .env 文件：

NUXT_OPENAI_API_KEY=sk-your-api-key-here
NUXT_OPENAI_BASE_URL=https://api.openai.com/v1
NUXT_AI_MODEL=gpt-4o-mini

在 nuxt.config.ts 中不需要额外配置，Nitro 会自动读取以 NUXT_ 开头的环境变量并通过 useRuntimeConfig() 暴露给服务端。

三、创建 AI 服务层

为了代码复用和维护性，我们先创建一个通用的 AI 服务封装。在 server/utils/ai.ts 中：

interface ChatMessage {
  role: 'system' | 'user' | 'assistant'
  content: string
}

interface ChatOptions {
  messages: ChatMessage[]
  temperature?: number
  maxTokens?: number
  stream?: boolean
}

export async function chatCompletion(options: ChatOptions) {
  const config = useRuntimeConfig()
  
  const response = await $fetch(`${config.openaiBaseUrl}/chat/completions`, {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${config.openaiApiKey}`,
      'Content-Type': 'application/json',
    },
    body: {
      model: config.aiModel,
      messages: options.messages,
      temperature: options.temperature ?? 0.7,
      max_tokens: options.maxTokens ?? 2048,
      stream: options.stream ?? false,
    },
  })
  
  return response
}

四、实现内容生成 API 路由

创建 server/api/ai/generate.post.ts：

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  const { prompt, systemPrompt } = body

  if (!prompt) {
    throw createError({
      statusCode: 400,
      message: 'prompt 参数不能为空',
    })
  }

  try {
    const result = await chatCompletion({
      messages: [
        { role: 'system', content: systemPrompt || '你是一个专业的技术内容创作者。' },
        { role: 'user', content: prompt },
      ],
      temperature: 0.8,
    })

    return {
      success: true,
      content: result.choices[0].message.content,
      usage: result.usage,
    }
  } catch (error: any) {
    throw createError({
      statusCode: 500,
      message: error.message || 'AI 服务调用失败',
    })
  }
})

五、实现流式响应（SSE）

对于内容生成场景，流式响应能大幅提升用户体验——用户可以看到文字逐字生成，而不是等待几秒钟后一次性展示。创建 server/api/ai/stream.post.ts：

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  const { prompt, systemPrompt } = body
  const config = useRuntimeConfig()

  setHeader(event, 'Content-Type', 'text/event-stream')
  setHeader(event, 'Cache-Control', 'no-cache')
  setHeader(event, 'Connection', 'keep-alive')

  const response = await fetch(
    `${config.openaiBaseUrl}/chat/completions`,
    {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${config.openaiApiKey}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        model: config.aiModel,
        messages: [
          { role: 'system', content: systemPrompt || '你是一个专业助手。' },
          { role: 'user', content: prompt },
        ],
        stream: true,
      }),
    }
  )

  const reader = response.body?.getReader()
  if (!reader) throw createError({ statusCode: 500 })

  const decoder = new TextDecoder()
  let buffer = ''

  while (true) {
    const { done, value } = await reader.read()
    if (done) {
      sendEventStream(event, { data: '[DONE]' })
      break
    }

    buffer += decoder.decode(value, { stream: true })
    const lines = buffer.split('n')
    buffer = lines.pop() || ''

    for (const line of lines) {
      if (line.startsWith('data: ') && line !== 'data: [DONE]') {
        try {
          const parsed = JSON.parse(line.slice(6))
          const content = parsed.choices[0]?.delta?.content
          if (content) {
            sendEventStream(event, { data: content })
          }
        } catch {}
      }
    }
  }
})

六、前端 Vue 组件集成

创建一个可复用的 AI 内容生成组件：

<script setup lang="ts">
const prompt = ref('')
const generatedContent = ref('')
const isLoading = ref(false)
const isStreaming = ref(false)

async function generateContent() {
  if (!prompt.value.trim()) return
  
  isLoading.value = true
  generatedContent.value = ''
  
  try {
    const data = await $fetch('/api/ai/generate', {
      method: 'POST',
      body: { prompt: prompt.value },
    })
    generatedContent.value = data.content
  } catch (error) {
    console.error('生成失败:', error)
  } finally {
    isLoading.value = false
  }
}

async function generateStream() {
  if (!prompt.value.trim()) return
  
  isStreaming.value = true
  generatedContent.value = ''
  
  const eventSource = new EventSource(
    `/api/ai/stream?${new URLSearchParams({ prompt: prompt.value })}`
  )
  
  eventSource.onmessage = (event) => {
    if (event.data === '[DONE]') {
      eventSource.close()
      isStreaming.value = false
      return
    }
    generatedContent.value += event.data
  }
  
  eventSource.onerror = () => {
    eventSource.close()
    isStreaming.value = false
  }
}
</script>

七、多语言翻译实现

基于上述 AI 服务层，实现多语言翻译非常简单。创建 server/api/ai/translate.post.ts：

export default defineEventHandler(async (event) => {
  const { text, targetLang, sourceLang } = await readBody(event)

  const langMap: Record<string, string> = {
    'zh-cn': '简体中文',
    'zh-tw': '繁体中文',
    'en': 'English'
  }

  const result = await chatCompletion({
    messages: [
      {
        role: 'system',
        content: `你是一个专业翻译。将用户输入的${sourceLang ? langMap[sourceLang] || sourceLang : ''}内容翻译为${langMap[targetLang] || targetLang}。只返回翻译结果，不要添加任何解释。`,
      },
      { role: 'user', content: text },
    ],
    temperature: 0.3,
  })

  return {
    success: true,
    translation: result.choices[0].message.content,
    sourceLang,
    targetLang,
  }
})

八、错误处理与速率限制

生产环境中，AI API 调用可能因各种原因失败——网络超时、速率限制、余额不足等。我们需要健壮的错误处理机制。

在 server/utils/ai.ts 中添加重试逻辑：

export async function chatCompletionWithRetry(
  options: ChatOptions,
  maxRetries = 3
) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      return await chatCompletion(options)
    } catch (error: any) {
      if (error.statusCode === 429) {
        // 速率限制，等待后重试
        const retryAfter = error.headers?.get('retry-after') || 5
        await new Promise(r => setTimeout(r, retryAfter * 1000))
        continue
      }
      if (i === maxRetries - 1) throw error
      await new Promise(r => setTimeout(r, 1000 * Math.pow(2, i)))
    }
  }
}

同时建议在 Nitro 配置中设置请求体大小限制：

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/api/ai/**': {
        maxBodySize: '1mb',
      },
    },
  },
})