用 Vue 3 + OpenAI API 实现一个智能对话助手（支持上下文、多角色）

一、项目背景与功能介绍

随着 OpenAI 的 API 对公众开放，越来越多 Web 应用开始集成 ChatGPT 能力。从“智能客服”到“AI 写作助手”，前端在其中的作用变得尤为关键。

本项目旨在用 Vue 3 打造一个简洁易用的智能对话助手，具备以下核心能力：

• ✅ 支持与 ChatGPT 的连续对话（上下文记忆）
• ✅ 支持多角色身份设定（助手 / 翻译官 / 写作导师等）
• ✅ 支持请求加载提示、自动滚动展示
• ✅ 可拓展 Markdown 渲染、聊天记录导出等功能

场景适用于：

• SaaS 后台系统智能客服
• AI 内容创作助手
• 学习类平台中的问答机器人

二、技术选型与准备工作

本项目采用如下技术栈：

环境准备

1. 注册并获取 OpenAI API Key：
   👉 https://platform.openai.com/account/api-keys

2. 在项目根目录添加 .env 文件，并配置：

VITE_OPENAI_API_KEY=你的真实key

3. 安装依赖（你也可以使用 Vite 创建 Vue 项目）：

npm install axios
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Tailwind 可换为任意 UI 框架，如 Element Plus、Naive UI 等。

三、智能对话助手的实现

第一节：封装 OpenAI 接口请求

我们封装一个 chatWithGPT 方法，用于发送对话上下文：

// utils/openai.ts
import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://api.openai.com/v1',
  headers: {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${import.meta.env.VITE_OPENAI_API_KEY}`
  }
})

export function chatWithGPT(messages: any[], model = 'gpt-3.5-turbo') {
  return instance.post('/chat/completions', {
    model,
    messages
  })
}

第二节：构建消息上下文结构

消息体结构参考 OpenAI 的标准格式：

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

系统设定语句一般放在最前：

const messages = ref<ChatMessage[]>([
  { role: 'system', content: '你是一个有帮助的中文智能助手。' }
])

每当用户输入后，追加一条 user 消息，随后调用接口获取 assistant 回复。

第三节：构建对话 UI 组件

使用 Composition API 实现基本聊天逻辑：

<template>
  <div class="p-4 max-w-2xl mx-auto space-y-4">
    <div class="h-96 overflow-y-auto bg-gray-50 rounded p-2">
      <div v-for="(msg, i) in messages" :key="i" class="mb-2">
        <div class="font-semibold text-sm text-gray-700">
          {{ msg.role === 'user' ? '🙋 用户' : msg.role === 'assistant' ? '🤖 助手' : '⚙️ 系统' }}
        </div>
        <div class="ml-4 text-gray-800">{{ msg.content }}</div>
      </div>
      <div v-if="loading" class="text-gray-500">助手正在思考中...</div>
    </div>
    <textarea v-model="input" class="w-full border rounded p-2" rows="3" placeholder="输入你的问题..." />
    <div class="flex justify-end">
      <button @click="send" class="bg-blue-600 text-white px-4 py-1 rounded" :disabled="loading">发送</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { chatWithGPT } from '@/utils/openai'

const input = ref('')
const loading = ref(false)
const messages = ref([
  { role: 'system', content: '你是一个有帮助的中文智能助手。' }
])

const send = async () => {
  if (!input.value.trim()) return
  messages.value.push({ role: 'user', content: input.value })
  const currentInput = input.value
  input.value = ''
  loading.value = true
  try {
    const res = await chatWithGPT(messages.value)
    const reply = res.data.choices[0].message
    messages.value.push(reply)
  } catch (e) {
    messages.value.push({ role: 'assistant', content: '请求出错，请稍后重试。' })
  } finally {
    loading.value = false
  }
}
</script>

第四节：滚动自动到底部（可选优化）

可通过监听 DOM 滚动元素实现“消息自动滚动到底部”：

watch(messages, () => {
  nextTick(() => {
    const container = document.querySelector('.overflow-y-auto')
    container?.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })
  })
})

四、多角色设定与功能拓展

第一节：添加多角色设定功能

可以添加下拉菜单或 Tab，实现角色 prompt 动态切换：

const roles = {
  默认: '你是一个有帮助的中文助手。',
  翻译官: '你是一个翻译专家，把所有用户输入翻译成英文回复。',
  写作导师: '你是一个文章优化专家，帮助用户润色语句。'
}

const currentRole = ref('默认')

const resetRole = () => {
  messages.value = [
    { role: 'system', content: roles[currentRole.value] }
  ]
}

第二节：其他功能建议

• ✅ Markdown 格式回复（可用 marked / markdown-it 渲染）
• ✅ 聊天记录导出为 TXT / JSON
• ✅ 聊天记录持久化至 LocalStorage / IndexedDB
• ✅ 加入快捷命令系统（如 /总结, /翻译, /优化）

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多 篇 前端 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～ 💕