Vue.js构建轻量级ChatGPT前端应用实践-代码聚汇网

Vue.js构建轻量级ChatGPT前端应用实践

幸运小姐

1. 项目概述

最近在折腾一个有意思的小项目——用Vue.js搭建一个轻量级的ChatGPT前端应用。这个应用有几个核心功能：支持连续对话、Markdown格式渲染，还能把聊天记录保存在本地。作为一个经常和AI对话的开发者，我发现市面上的很多客户端要么太臃肿，要么缺少我需要的功能，于是决定自己动手造个轮子。

这个项目特别适合以下人群：

想学习如何将Vue与AI服务集成的开发者
需要定制化ChatGPT客户端的用户
对前端技术栈感兴趣的AI爱好者

2. 技术选型与架构设计

2.1 为什么选择Vue.js

Vue 3的组合式API特别适合这类交互复杂的应用。相比React，Vue的模板语法让界面开发更直观，而相比Angular，它又足够轻量。具体优势体现在：

响应式系统天然适合聊天应用的实时更新
组件化开发便于管理对话列表、输入框等模块
丰富的生态系统（Vuex/Pinia状态管理、Vue Router等）

2.2 核心功能拆解

2.2.1 连续对话实现

关键点在于维护对话上下文。我的方案是：

javascript复制// 对话历史存储结构
const chatHistory = ref([
  {
    id: 1,
    role: 'user',
    content: '你好',
    timestamp: Date.now()
  },
  {
    id: 2,
    role: 'assistant',
    content: '你好！有什么可以帮你的？',
    timestamp: Date.now() + 1000
  }
])

2.2.2 Markdown渲染方案

对比了多个Markdown解析库后，最终选择marked.js + highlight.js组合：

bash复制npm install marked highlight.js

配置示例：

javascript复制import { marked } from 'marked'
import hljs from 'highlight.js'

marked.setOptions({
  highlight: function(code, lang) {
    return hljs.highlightAuto(code, [lang]).value
  }
})

2.2.3 本地记忆存储

采用localStorage + 内存缓存的混合方案：

最近对话保存在内存中保证性能
历史对话定期持久化到localStorage
添加压缩功能减少存储占用

3. 关键实现细节

3.1 API通信层封装

与ChatGPT API交互的核心代码：

javascript复制async function sendMessage(messages) {
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      model: "gpt-3.5-turbo",
      messages: messages,
      temperature: 0.7
    })
  })
  
  if (!response.ok) {
    throw new Error(`API请求失败: ${response.status}`)
  }
  
  return await response.json()
}

3.2 对话界面实现

使用Vue的单文件组件结构：

html复制<template>
  <div class="chat-container">
    <div class="message-list">
      <MessageItem 
        v-for="message in messages"
        :key="message.id"
        :message="message"
      />
    </div>
    <MessageInput @send="handleSend" />
  </div>
</template>

3.3 性能优化技巧

虚拟滚动：对话列表超过50条时启用

javascript复制import { VirtualScroller } from 'vue-virtual-scroller'

请求节流：防止用户快速连续发送消息
缓存策略：重复问题直接返回缓存答案

4. 常见问题与解决方案

4.1 跨域问题处理

开发环境下配置vue.config.js:

javascript复制module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.openai.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

4.2 Markdown安全渲染

防止XSS攻击的配置：

javascript复制import DOMPurify from 'dompurify'

const safeHtml = DOMPurify.sanitize(marked.parse(markdownText))

4.3 本地存储限制

应对localStorage 5MB限制的方案：

定期清理早期对话
重要对话单独导出
使用IndexedDB存储大量历史

5. 项目扩展方向

多主题支持：通过CSS变量实现暗黑/明亮模式切换
对话导出：支持PDF/Markdown格式导出
插件系统：允许用户自定义命令和快捷操作
多端同步：通过WebDAV或自建服务同步对话记录

提示：在实际开发中，建议使用环境变量管理API密钥，不要直接硬编码在前端代码中。

这个项目最让我惊喜的是Vue 3的响应式系统与AI对话场景的契合度。通过组合式API，可以很优雅地管理对话状态和副作用。比如下面这个自动滚动到底部的实现：

javascript复制watchEffect(() => {
  if (messages.value.length) {
    nextTick(() => {
      const container = document.querySelector('.message-list')
      container.scrollTop = container.scrollHeight
    })
  }
})

对于想自己尝试的开发者，建议先从基础功能开始，逐步添加Markdown支持、本地存储等特性。遇到API限流问题时，可以考虑添加重试机制和友好的错误提示。