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

7次阅读

没有评论

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

在当今快速发展的 AI 领域，ChatGPT 等大语言模型为开发者提供了强大的对话能力。然而，在实际开发过程中，将 ChatGPT API 与前端框架 Vue3 结合时，开发者常常会遇到一些挑战：

状态管理复杂 ：对话历史、用户输入、AI 回复等多状态需要高效同步
API 调用优化 ：避免频繁请求带来的性能问题和 API 费用增加
响应式设计 ：确保 UI 能够实时反映对话状态变化
错误处理 ：网络波动、API 限制等异常情况需要妥善处理

Pinia：
Vue3 官方推荐的状态管理库
更轻量、TypeScript 支持更好
更简单的 API 设计和模块化管理
Vuex：
Vue 生态中的老牌状态管理方案
功能全面但相对复杂
对大型项目有成熟解决方案

推荐选择 ：对于 ChatGPT 界面这种中等复杂度的应用，Pinia 是更优选择。

Axios：
功能全面，支持请求 / 响应拦截
自动 JSON 转换
取消请求和超时处理
Fetch API：
浏览器原生支持，无需额外依赖
更现代的 Promise-based API
需要手动处理 JSON 转换

推荐选择 ：Axios 更适合生产环境，因其完善的错误处理和拦截器功能。

src/
├── stores/          # Pinia 状态管理
│   └── chat.js
├── api/            # API 相关
│   └── chatgpt.js
├── components/     # 可复用组件
│   └── Message.vue
└── views/
    └── ChatView.vue # 主界面

// stores/chat.js
import {defineStore} from 'pinia'

export const useChatStore = defineStore('chat', {state: () => ({messages: [],
    isLoading: false,
    error: null
  }),
  actions: {addMessage(message) {this.messages.push(message)
    },
    setLoading(status) {this.isLoading = status},
    setError(error) {this.error = error},
    clearError() {this.error = null}
  }
})

// api/chatgpt.js
import axios from 'axios'

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

export const sendMessage = async (messages) => {
  try {
    const response = await api.post('/chat/completions', {
      model: 'gpt-3.5-turbo',
      messages
    })
    return response.data.choices[0].message
  } catch (error) {console.error('API 调用失败:', error)
    throw error
  }
}

<!-- views/ChatView.vue -->
<template>
  <div class="chat-container">
    <div class="messages">
      <Message 
        v-for="(message, index) in messages" 
        :key="index" 
        :message="message" 
      />
    </div>

    <form @submit.prevent="handleSubmit">
      <input 
        v-model="inputMessage" 
        :disabled="isLoading"
        placeholder="输入消息..."
      />
      <button type="submit" :disabled="isLoading">
        {{isLoading ? '发送中...' : '发送'}}
      </button>
    </form>

    <div v-if="error" class="error">
      {{error}}
    </div>
  </div>
</template>

<script setup>
import {ref, computed} from 'vue'
import {useChatStore} from '@/stores/chat'
import {sendMessage} from '@/api/chatgpt'
import Message from '@/components/Message.vue'

const chatStore = useChatStore()
const inputMessage = ref('')

const messages = computed(() => chatStore.messages)
const isLoading = computed(() => chatStore.isLoading)
const error = computed(() => chatStore.error)

const handleSubmit = async () => {if (!inputMessage.value.trim()) return

  const userMessage = {role: 'user', content: inputMessage.value}
  chatStore.addMessage(userMessage)
  chatStore.setLoading(true)

  try {const aiMessage = await sendMessage([...messages.value, userMessage])
    chatStore.addMessage(aiMessage)
    inputMessage.value = ''
  } catch (err) {chatStore.setError('发送消息失败，请稍后再试')
  } finally {chatStore.setLoading(false)
  }
}
</script>