Vue3 + ChatGPT 界面搭建实战：从零构建智能对话应用

共计 3219 个字符，预计需要花费 9 分钟才能阅读完成。

背景与痛点

在传统聊天界面开发中，开发者需要处理复杂的实时通信逻辑、消息状态管理和界面渲染优化。常见痛点包括：

• WebSocket 连接维护困难
• 消息时序难以保证
• 历史记录管理复杂
• UI 响应性能瓶颈

ChatGPT 的 API 集成解决了自然语言处理的核心难题，让我们可以专注于界面和交互优化。Vue3 的响应式系统特别适合处理实时数据流，两者结合能快速搭建高质量的对话应用。

技术选型

对比主流前端框架在实时应用中的表现：

• React：需要配合 Redux 等状态库处理复杂数据流
• Angular：学习曲线陡峭，模板语法较重
• Vue3 优势：
• Composition API 更灵活地组织聊天逻辑
• 内置响应式系统简化状态管理
• 更小的运行时体积（约 20KB gzipped）
• 更好的 TypeScript 支持

核心实现

1. Vue3 项目初始化

使用 Vite 快速搭建项目：

npm create vite@latest chatgpt-demo --template vue-ts

2. Composition API 基础结构

// src/components/ChatWindow.vue
import {ref, reactive} from 'vue'

export default {setup() {const messages = reactive<Array<{role: string, content: string}>>([])
    const inputText = ref('')
    const isLoading = ref(false)

    return {messages, inputText, isLoading}
  }
}

3. ChatGPT API 集成

安装 axios 处理 HTTP 请求：

import axios from 'axios'

const sendMessage = async () => {if (!inputText.value.trim()) return

  const userMessage = {role: 'user', content: inputText.value}
  messages.push(userMessage)
  inputText.value = ''
  isLoading.value = true

  try {
    const response = await axios.post('https://api.openai.com/v1/chat/completions', {
      model: 'gpt-3.5-turbo',
      messages: [...messages]
    }, {
      headers: {'Authorization': `Bearer ${import.meta.env.VITE_OPENAI_KEY}`,
        'Content-Type': 'application/json'
      }
    })

    const aiMessage = response.data.choices[0].message
    messages.push(aiMessage)
  } catch (error) {console.error('API 调用失败:', error)
    messages.push({ 
      role: 'assistant', 
      content: '抱歉，我遇到了一些问题，请稍后再试。'
    })
  } finally {isLoading.value = false}
}

4. 消息列表渲染优化

使用虚拟滚动处理长对话历史：

<template>
  <div class="message-container">
    <VirtualScroller 
      :items="messages"
      :item-height="64"
      key-field="timestamp"
    >
      <template v-slot="{item}">
        <div :class="['message', item.role]">
          {{item.content}}
        </div>
      </template>
    </VirtualScroller>
  </div>
</template>

完整代码示例

<script setup lang="ts">
import {ref, reactive} from 'vue'
import axios from 'axios'

type Message = {
  role: 'user' | 'assistant'
  content: string
  timestamp?: number
}

const messages = reactive<Message[]>([])
const inputText = ref('')
const isLoading = ref(false)

const sendMessage = async () => {// 实现同上...}
</script>

<template>
  <div class="chat-container">
    <div class="message-list">
      <div 
        v-for="(msg, index) in messages" 
        :key="index" 
        :class="['message', msg.role]"
      >
        {{msg.content}}
      </div>
      <div v-if="isLoading" class="loading-indicator">
        思考中...
      </div>
    </div>

    <div class="input-area">
      <input 
        v-model="inputText" 
        @keyup.enter="sendMessage"
        placeholder="输入消息..."
      />
      <button @click="sendMessage" :disabled="isLoading">
        发送
      </button>
    </div>
  </div>
</template>

性能优化技巧

1. 请求防抖 ：避免快速连续发送请求

import {debounce} from 'lodash-es'

const debouncedSend = debounce(sendMessage, 500)

1. 本地缓存 ：存储对话历史到 localStorage

// 保存对话
watch(messages, (val) => {localStorage.setItem('chatHistory', JSON.stringify(val))
}, {deep: true})

// 初始化时读取
onMounted(() => {const history = localStorage.getItem('chatHistory')
  if (history) messages.push(...JSON.parse(history))
})

1. API 节流 ：限制大响应流的处理速度

const processStream = (stream: ReadableStream) => {const reader = stream.getReader()
  const decoder = new TextDecoder()

  const readChunk = async () => {const { done, value} = await reader.read()
    if (done) return

    const chunk = decoder.decode(value)
    // 增量更新消息内容
    messages[messages.length - 1].content += chunk

    // 控制渲染频率
    requestAnimationFrame(readChunk)
  }

  readChunk()}

生产环境建议

• 错误处理 ：监控 API 失败率并降级处理
• 内容过滤 ：后端增加敏感词过滤中间件
• 用户体验 ：
• 添加消息发送动画
• 实现消息撤回功能
• 支持 Markdown 渲染

扩展思考

实现多轮对话上下文：

const getContextMessages = () => {
  // 只保留最近 5 轮对话作为上下文
  return messages.slice(-10)
}

添加对话记忆功能：

const saveImportantContext = () => {// 识别关键信息并持久化存储}

通过本文介绍的方法，你可以快速搭建一个功能完善的智能对话界面。接下来可以尝试集成语音输入、多模态交互等高级功能，进一步提升用户体验。