当前位置：首页 > VUE

vue实现gpt聊天

2026-03-30 03:25:24VUE

Vue实现GPT聊天功能

创建Vue项目

使用Vue CLI创建一个新项目

vue create gpt-chat-app
cd gpt-chat-app

安装必要的依赖

vue实现gpt聊天

npm install axios

创建聊天组件

在src/components目录下创建Chat.vue文件

vue实现gpt聊天

<template>
  <div class="chat-container">
    <div class="messages">
      <div v-for="(message, index) in messages" :key="index" :class="['message', message.role]">
        {{ message.content }}
      </div>
    </div>
    <div class="input-area">
      <input v-model="inputMessage" @keyup.enter="sendMessage" placeholder="输入消息..."/>
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      messages: [],
      inputMessage: '',
      apiKey: 'YOUR_OPENAI_API_KEY',
      apiUrl: 'https://api.openai.com/v1/chat/completions'
    };
  },
  methods: {
    async sendMessage() {
      if (!this.inputMessage.trim()) return;

      const userMessage = { role: 'user', content: this.inputMessage };
      this.messages.push(userMessage);

      const tempMessage = this.inputMessage;
      this.inputMessage = '';

      try {
        const response = await axios.post(this.apiUrl, {
          model: "gpt-3.5-turbo",
          messages: [...this.messages],
          temperature: 0.7
        }, {
          headers: {
            'Authorization': `Bearer ${this.apiKey}`,
            'Content-Type': 'application/json'
          }
        });

        const aiMessage = response.data.choices[0].message;
        this.messages.push(aiMessage);
      } catch (error) {
        console.error('Error:', error);
        this.messages.push({ role: 'assistant', content: '抱歉，出错了，请稍后再试。' });
      }
    }
  }
};
</script>

<style>
.chat-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
.messages {
  height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  padding: 10px;
}
.message {
  margin: 10px 0;
  padding: 8px 12px;
  border-radius: 4px;
}
.user {
  background-color: #e3f2fd;
  margin-left: 20%;
}
.assistant {
  background-color: #f5f5f5;
  margin-right: 20%;
}
.input-area {
  display: flex;
}
input {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
button {
  margin-left: 10px;
  padding: 8px 16px;
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

配置路由

在src/router/index.js中配置路由

import { createRouter, createWebHistory } from 'vue-router';
import Chat from '../components/Chat.vue';

const routes = [
  {
    path: '/',
    name: 'Chat',
    component: Chat
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;