1. 项目背景与核心功能去年ChatGPT刚发布时我就在想能不能自己写个前端应用把它的API封装成更符合日常使用习惯的界面当时市面上已有的客户端要么功能臃肿要么缺少关键特性。经过几个周末的折腾最终用Vue3实现了一个极简但实用的ChatGPT前端核心解决了三个痛点连续对话官方网页版虽然能记住上下文但每次刷新就清零。我这个版本会把对话历史存在本地重启浏览器也能继续聊。Markdown渲染ChatGPT返回的代码块、表格等内容在前端用marked.js实现语法高亮和格式美化比纯文本友好得多。轻量化设计整个应用打包后不到200KB没有冗余依赖甚至能在10年前的电脑上流畅运行。2. 技术选型与项目搭建2.1 为什么选择Vue3对比React和Svelte后选择Vue3的原因很实际组合式API更适合封装聊天逻辑后文会详细展示useChat这个hook单文件组件让Markdown渲染和样式隔离更简单Vite的启动速度比Webpack快5倍以上适合快速迭代创建项目时推荐用以下命令npm create vitelatest chatgpt-web --template vue-ts2.2 关键依赖清单{ dependencies: { vue: ^3.3.0, marked: ^5.0.0, // Markdown解析 highlight.js: ^11.0.0, // 代码高亮 pinia: ^2.0.0 // 状态管理 } }注意不要安装官方OpenAI库直接用fetch调用API。第三方库会增加打包体积而且我们只需要最基础的POST功能。3. 核心功能实现详解3.1 连续对话的本地存储方案实现本地记忆的关键是合理设计数据结构。我的方案是interface Message { role: user | assistant content: string timestamp: number } const chatHistory useLocalStorageMessage[](chat-history, [])在Pinia中封装存储逻辑export const useChatStore defineStore(chat, { actions: { addMessage(message: Message) { // 限制最多存储50条消息 if (this.messages.length 50) { this.messages.shift() } this.messages.push(message) } } })3.2 Markdown渲染的优化技巧直接使用marked会有XSS风险需要配置sanitizerimport { marked } from marked import DOMPurify from dompurify marked.setOptions({ highlight: (code) hljs.highlightAuto(code).value }) const safeMarkdown (raw: string) { return DOMPurify.sanitize(marked.parse(raw)) }样式优化建议/* 让代码块有更好的视觉区分 */ pre { background: #f8f8f8; border-radius: 6px; padding: 12px; overflow-x: auto; } /* 表格添加斑马纹 */ table tr:nth-child(even) { background: #f2f2f2; }3.3 API调用的防抖与错误处理ChatGPT API有时响应较慢需要做请求管理let controller: AbortController | null null const fetchAIResponse async (messages: Message[]) { // 取消上一个未完成的请求 if (controller) controller.abort() controller new AbortController() try { const response await fetch(https://api.openai.com/v1/chat/completions, { signal: controller.signal, method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${import.meta.env.VITE_OPENAI_KEY} }, body: JSON.stringify({ model: gpt-3.5-turbo, messages }) }) if (!response.ok) throw new Error(HTTP error! status: ${response.status}) return await response.json() } finally { controller null } }4. 实战中的性能优化4.1 虚拟滚动优化长对话列表当聊天记录超过50条时使用vue-virtual-scroller提升性能template RecycleScroller :itemsmessages :item-size80 key-fieldtimestamp template #default{ item } div classmessage !-- 消息内容渲染 -- /div /template /RecycleScroller /template4.2 智能缓存策略对常见问题答案进行本地缓存const cachedAnswers new Mapstring, string() const getCachedAnswer (question: string) { const key question.trim().toLowerCase() return cachedAnswers.get(key) }5. 常见问题与解决方案5.1 如何处理API限流实测发现两个有效策略指数退避重试首次失败后等待1秒第二次等待2秒第三次4秒...请求队列当同时触发多个请求时用队列顺序处理const requestQueue: (() Promisevoid)[] [] let isProcessing false const processQueue async () { if (isProcessing || requestQueue.length 0) return isProcessing true const task requestQueue.shift() await task?.() isProcessing false processQueue() }5.2 移动端适配技巧在手机上有两个关键调整输入框使用position: fixed固定在底部启用iOS的弹性滚动body { -webkit-overflow-scrolling: touch; }6. 项目部署与后续迭代6.1 最简单的部署方案用Vercel或Netlify可以免费部署在项目根目录创建vercel.json{ rewrites: [{ source: /(.*), destination: /index.html }] }连接Git仓库自动部署6.2 值得添加的功能对话标签管理给不同对话打标签方便检索预设Prompt模板一键插入常用提问模板API用量统计监控token消耗情况这个项目的核心价值在于用最精简的代码实现了ChatGPT最实用的功能。去掉所有花哨的UI专注于提升对话体验。如果你也想自己定制AI助手不妨从这个最小可行版本开始迭代。
