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

一、项目背景与功能介绍

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

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

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

场景适用于：

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

二、技术选型与准备工作

本项目采用如下技术栈：

技术	用途
Vue 3 + Composition API	构建响应式组件
Axios	封装 OpenAI 请求
Tailwind CSS	快速布局与样式美化
OpenAI Chat Completion API	接入 GPT 模型进行对话

环境准备

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()) returnmessages.value.push({ role: 'user', content: input.value })const currentInput = input.valueinput.value = ''loading.value = truetry {const res = await chatWithGPT(messages.value)const reply = res.data.choices[0].messagemessages.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
• ✅ 加入快捷命令系统（如 /总结, /翻译, /优化）

---

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