当前位置：首页 > VUE

vue实现ai智能聊天

2026-01-22 00:05:09VUE

Vue 实现 AI 智能聊天功能

项目初始化与依赖安装

创建一个新的 Vue 项目并安装必要的依赖，如 axios 用于 HTTP 请求，vue-socket.io 可选用于实时通信：

vue create ai-chat-demo
cd ai-chat-demo
npm install axios vue-socket.io

集成 AI 聊天 API

选择 AI 服务提供商（如 OpenAI、腾讯云或阿里云），获取 API 密钥。以 OpenAI 为例：

// src/utils/api.js
import axios from 'axios';

const openai = axios.create({
  baseURL: 'https://api.openai.com/v1/chat/completions',
  headers: {
    'Authorization': `Bearer YOUR_OPENAI_KEY`,
    'Content-Type': 'application/json'
  }
});

export const getAIResponse = async (messages) => {
  const response = await openai.post('', {
    model: "gpt-3.5-turbo",
    messages
  });
  return response.data.choices[0].message.content;
};

前端界面设计

创建聊天组件，包含消息列表和输入框：

<!-- src/components/ChatWindow.vue -->
<template>
  <div class="chat-container">
    <div v-for="(msg, index) in messages" :key="index">
      <div :class="['message', msg.role]">{{ msg.content }}</div>
    </div>
    <input v-model="inputMessage" @keyup.enter="sendMessage" />
  </div>
</template>

<script>
import { getAIResponse } from '../utils/api';

export default {
  data() {
    return {
      messages: [],
      inputMessage: ''
    };
  },
  methods: {
    async sendMessage() {
      const userMsg = { role: 'user', content: this.inputMessage };
      this.messages.push(userMsg);
      this.inputMessage = '';

      const aiResponse = await getAIResponse(this.messages);
      this.messages.push({ role: 'assistant', content: aiResponse });
    }
  }
};
</script>

实时通信增强（可选）

使用 WebSocket 实现更快的响应，通过 Socket.IO 或类似库：

// src/main.js
import VueSocketIO from 'vue-socket.io';

Vue.use(new VueSocketIO({
  debug: true,
  connection: 'http://your-socket-server',
}));

样式优化

添加基础样式提升用户体验：

/* src/components/ChatWindow.vue */
.chat-container {
  max-width: 600px;
  margin: 0 auto;
}
.message {
  padding: 8px;
  margin: 4px;
  border-radius: 4px;
}
.user {
  background-color: #e3f2fd;
  text-align: right;
}
.assistant {
  background-color: #f5f5f5;
}