当前位置：首页 > news >正文

Vue3前端项目集成指南：调用Qwen3-14B-AWQ模型API实现智能交互

news 2026/6/1 11:35:12

Vue3前端项目集成指南：调用Qwen3-14B-AWQ模型API实现智能交互

1. 前言：为什么要在Vue3中集成大模型API

最近几年，大语言模型在各类应用中的集成变得越来越普遍。作为前端开发者，我们经常需要将这些强大的AI能力整合到自己的项目中。Qwen3-14B-AWQ是一个性能优异的大语言模型，通过API方式调用可以轻松实现智能对话、内容生成等功能。

本教程将带你从零开始，在Vue3项目中完成Qwen3-14B-AWQ模型的API集成。我们会从最基本的项目搭建开始，一步步实现一个完整的智能对话组件。即使你之前没有接触过AI模型集成，跟着这个教程也能轻松上手。

2. 环境准备与项目创建

2.1 创建Vue3项目

首先，确保你已经安装了Node.js（建议版本16+）和npm。然后，我们可以使用Vue CLI来创建一个新的Vue3项目：

npm install -g @vue/cli vue create vue3-qwen-integration

在创建过程中，选择"Vue 3"作为预设，其他配置保持默认即可。

2.2 安装必要依赖

进入项目目录，安装我们需要的依赖：

cd vue3-qwen-integration npm install axios

Axios将用于我们与Qwen3-14B-AWQ模型的API进行通信。

3. 配置API请求基础

3.1 创建API服务模块

在src目录下创建一个新的services文件夹，然后添加api.js文件：

// src/services/api.js import axios from 'axios'; const apiClient = axios.create({ baseURL: 'https://your-qwen-api-endpoint.com', // 替换为实际的API地址 headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer YOUR_API_KEY' // 替换为你的API密钥 } }); export default { async queryModel(prompt) { try { const response = await apiClient.post('/v1/completions', { model: "Qwen3-14B-AWQ", prompt: prompt, max_tokens: 1000 }); return response.data; } catch (error) { console.error('API请求失败:', error); throw error; } } };

3.2 环境变量配置

为了避免将敏感信息硬编码在代码中，我们可以使用环境变量。在项目根目录创建.env文件：

VUE_APP_API_BASE_URL=https://your-qwen-api-endpoint.com VUE_APP_API_KEY=YOUR_API_KEY

然后修改api.js，使用环境变量：

const apiClient = axios.create({ baseURL: process.env.VUE_APP_API_BASE_URL, headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${process.env.VUE_APP_API_KEY}` } });

4. 实现智能对话组件

4.1 创建对话组件

在components目录下创建ChatComponent.vue：

<template> <div class="chat-container"> <div class="message-list"> <div v-for="(message, index) in messages" :key="index" :class="['message', message.role]"> {{ message.content }} </div> </div> <div class="input-area"> <input v-model="userInput" @keyup.enter="sendMessage" placeholder="输入你的问题..." /> <button @click="sendMessage">发送</button> </div> </div> </template> <script> import api from '../services/api'; export default { data() { return { messages: [], userInput: '', isLoading: false }; }, methods: { async sendMessage() { if (!this.userInput.trim() || this.isLoading) return; const userMessage = { role: 'user', content: this.userInput }; this.messages.push(userMessage); this.userInput = ''; this.isLoading = true; try { const response = await api.queryModel(userMessage.content); const aiMessage = { role: 'assistant', content: response.choices[0].text }; this.messages.push(aiMessage); } catch (error) { console.error('获取AI回复失败:', error); this.messages.push({ role: 'assistant', content: '抱歉，我遇到了些问题，请稍后再试。' }); } finally { this.isLoading = false; } } } }; </script> <style scoped> .chat-container { max-width: 600px; margin: 0 auto; border: 1px solid #ddd; border-radius: 8px; padding: 20px; } .message-list { min-height: 300px; margin-bottom: 20px; } .message { padding: 8px 12px; margin-bottom: 8px; border-radius: 4px; } .user { background-color: #e3f2fd; text-align: right; } .assistant { background-color: #f5f5f5; text-align: left; } .input-area { display: flex; gap: 10px; } input { flex-grow: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } button { padding: 8px 16px; background-color: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #1565c0; } </style>

4.2 在主页面中使用组件

修改App.vue来使用我们的新组件：

<template> <div id="app"> <h1>Qwen3-14B-AWQ智能对话</h1> <ChatComponent /> </div> </template> <script> import ChatComponent from './components/ChatComponent.vue'; export default { name: 'App', components: { ChatComponent } }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; padding: 0 20px; } </style>

5. 进阶优化与最佳实践

5.1 添加加载状态指示器

在ChatComponent.vue中，我们可以添加一个加载指示器来提升用户体验：

<template> <!-- 其他代码不变 --> <div v-if="isLoading" class="loading-indicator"> 正在思考中... </div> <!-- 其他代码不变 --> </template> <script> // 脚本部分不变 </script> <style scoped> .loading-indicator { padding: 8px; text-align: center; color: #666; font-style: italic; } /* 其他样式不变 */ </style>

5.2 实现对话历史持久化

我们可以使用localStorage来保存对话历史，这样用户刷新页面后不会丢失之前的对话：

<script> export default { data() { return { messages: JSON.parse(localStorage.getItem('chatMessages')) || [], // 其他数据不变 }; }, watch: { messages: { handler(newMessages) { localStorage.setItem('chatMessages', JSON.stringify(newMessages)); }, deep: true } }, // 其他代码不变 }; </script>

5.3 错误处理与重试机制

增强我们的错误处理逻辑，添加重试按钮：

<template> <!-- 在message-list中添加 --> <div v-if="lastError" class="error-message"> 请求失败: {{ lastError }} <button @click="retryLastMessage">重试</button> </div> </template> <script> export default { data() { return { lastError: null, lastFailedMessage: null }; }, methods: { async sendMessage() { if (!this.userInput.trim() || this.isLoading) return; const userMessage = { role: 'user', content: this.userInput }; this.messages.push(userMessage); this.lastFailedMessage = userMessage; this.userInput = ''; await this.queryAI(userMessage.content); }, async queryAI(prompt) { this.isLoading = true; this.lastError = null; try { const response = await api.queryModel(prompt); const aiMessage = { role: 'assistant', content: response.choices[0].text }; this.messages.push(aiMessage); } catch (error) { console.error('获取AI回复失败:', error); this.lastError = error.message; } finally { this.isLoading = false; } }, retryLastMessage() { if (!this.lastFailedMessage) return; this.queryAI(this.lastFailedMessage.content); } } }; </script> <style scoped> .error-message { color: #d32f2f; padding: 8px; margin-bottom: 8px; background-color: #ffebee; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; } .error-message button { background-color: #d32f2f; } /* 其他样式不变 */ </style>