Phi-3-mini-128k-instruct开发实战：Vue3前端调用大模型API全流程

Phi-3-mini-128k-instruct开发实战Vue3前端调用大模型API全流程最近在捣鼓一个智能对话的小项目后端用上了微软新出的Phi-3-mini-128k-instruct模型推理速度挺快效果也不错。但前端这块儿怎么在Vue3里优雅地调用这个API特别是处理流式响应和管理对话历史着实让我琢磨了一阵子。今天就把这套从零到一的前端集成方案分享给你包含请求封装、流式处理、状态管理这些核心环节最后还会给你一个开箱即用的聊天组件代码。如果你也在Vue3项目里对接过大模型API或者正打算这么做这篇应该能帮你省下不少踩坑的时间。1. 项目准备与环境搭建在开始写代码之前咱们先把基础环境搭好。这个过程不复杂跟着步骤走就行。1.1 创建Vue3项目如果你还没有现成的项目可以用Vite快速创建一个。打开终端执行下面这行命令npm create vuelatest my-phi3-project创建过程中它会问你几个问题像是否要加TypeScript、路由、状态管理这些。对于咱们这个项目我建议把TypeScript和Pinia状态管理选上其他的按需选择就行。选完以后进入项目目录安装依赖cd my-phi3-project npm install1.2 安装必要的依赖咱们这个方案需要用到几个关键的库。在项目根目录下运行npm install axiosaxios: 用来发HTTP请求比原生的fetch用起来更方便拦截器、错误处理这些功能都很成熟。如果你的项目里打算用图标可以再装个lucide-vue-next它提供了一套挺好看的图标集。安装完以后可以先运行npm run dev看看项目能不能正常启动。没问题的话咱们就进入正题。2. 核心工具层API请求封装直接在每个组件里写axios.post太零散了也不好统一管理。咱们把跟大模型API相关的操作都封装到单独的工具模块里。2.1 创建API客户端在src目录下新建一个utils文件夹然后在里面创建apiClient.js文件。// src/utils/apiClient.js import axios from axios; // 创建一个配置好的axios实例方便统一管理基地址、超时时间等 const apiClient axios.create({ // 这里填你后端服务的地址。本地开发通常是 localhost:8000 或类似 baseURL: import.meta.env.VITE_API_BASE_URL || http://localhost:8000, timeout: 60000, // 超时时间设长一点大模型响应可能比较慢 headers: { Content-Type: application/json, }, }); // 请求拦截器可以在发送请求前做些事情比如统一加token apiClient.interceptors.request.use( (config) { // 假设你的后端需要认证可以从localStorage或Pinia store里取token // const token localStorage.getItem(auth_token); // if (token) { // config.headers.Authorization Bearer ${token}; // } return config; }, (error) { return Promise.reject(error); } ); // 响应拦截器统一处理错误比如网络问题、服务器错误 apiClient.interceptors.response.use( (response) { // 请求成功直接返回数据部分 return response.data; }, (error) { // 请求失败这里可以根据HTTP状态码做统一的错误提示 console.error(API请求错误:, error); let message 请求失败请稍后重试; if (error.response) { // 服务器返回了错误状态码 (4xx, 5xx) switch (error.response.status) { case 401: message 未授权请登录; break; case 403: message 拒绝访问; break; case 404: message 请求地址出错: ${error.response.config.url}; break; case 500: message 服务器内部错误; break; default: message 网络错误: ${error.response.status}; } } else if (error.request) { // 请求发了但没收到响应可能是网络断了 message 网络异常请检查网络连接; } // 这里可以触发一个全局的错误提示比如用Element Plus的Message // ElMessage.error(message); return Promise.reject(new Error(message)); } ); export default apiClient;这个客户端把axios包了一层加上了基地址、超时设置和全局的错误处理逻辑。注意那个VITE_API_BASE_URL它是从环境变量里读的这样区分开发环境和生产环境就很方便。在项目根目录创建.env.development和.env.production文件来分别配置。2.2 封装大模型服务接下来创建专门调用Phi-3模型的服务。在src/utils下再建一个phi3Service.js。// src/utils/phi3Service.js import apiClient from ./apiClient; /** * 发送普通对话请求非流式 * param {string} message - 用户输入的消息 * param {Array} history - 对话历史数组格式 [{role: user, content: xxx}, {role: assistant, content: yyy}] * returns {Promisestring} - 模型返回的完整回复 */ export const sendChatRequest async (message, history []) { try { const response await apiClient.post(/v1/chat/completions, { model: phi-3-mini-128k-instruct, // 根据你后端实际的模型名调整 messages: [ ...history, { role: user, content: message } ], stream: false, // 非流式 max_tokens: 1024, temperature: 0.7, }); // 假设后端返回格式遵循OpenAI API回复在 choices[0].message.content return response.choices[0].message.content; } catch (error) { console.error(发送聊天请求失败:, error); throw error; // 把错误抛出去让调用方处理 } }; /** * 发送流式对话请求Server-Sent Events * 这是一个生成器函数调用后返回一个异步迭代器可以逐块获取回复 * param {string} message - 用户输入的消息 * param {Array} history - 对话历史 * returns {AsyncGeneratorstring, void, unknown} - 每次yield一个回复片段 */ export async function* sendStreamChatRequest(message, history []) { // 注意流式请求我们通常直接用fetch因为axios对SSE的支持不如fetch原生 const baseURL import.meta.env.VITE_API_BASE_URL || http://localhost:8000; const payload { model: phi-3-mini-128k-instruct, messages: [ ...history, { role: user, content: message } ], stream: true, // 关键开启流式 max_tokens: 1024, temperature: 0.7, }; try { const response await fetch(${baseURL}/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, // 如果需要认证在这里加Authorization头 }, body: JSON.stringify(payload), }); if (!response.ok) { const errorText await response.text(); throw new Error(HTTP ${response.status}: ${errorText}); } const reader response.body?.getReader(); if (!reader) { throw new Error(响应体不可读); } const decoder new TextDecoder(utf-8); let buffer ; try { while (true) { const { done, value } await reader.read(); if (done) break; buffer decoder.decode(value, { stream: true }); const lines buffer.split(\n); buffer lines.pop(); // 最后一行可能不完整放回buffer for (const line of lines) { if (line.trim() ) continue; if (line.startsWith(data: )) { const data line.slice(6); // 去掉data: 前缀 if (data [DONE]) { return; // 流结束 } try { const parsed JSON.parse(data); const chunk parsed.choices[0]?.delta?.content || ; if (chunk) { yield chunk; // 产出每一个文本片段 } } catch (e) { console.warn(解析SSE数据失败:, e, 原始数据:, data); } } } } } finally { reader.releaseLock(); } } catch (error) { console.error(流式请求失败:, error); throw error; } }这里封装了两个核心方法。sendChatRequest是普通的阻塞式请求等模型全部生成完才返回结果。sendStreamChatRequest是重点它用fetch发起一个流式请求然后通过yield把模型生成的内容一块一块地“吐”出来前端就能实现打字机效果了。3. 状态与UI层构建聊天组件工具层准备好了现在来构建用户能看到和交互的部分。我们会用一个Vue组件来承载聊天界面并用Pinia来管理对话状态。3.1 创建对话状态管理Pinia Store在src/stores目录下如果没有就创建一个新建chatStore.js。// src/stores/chatStore.js import { defineStore } from pinia; import { ref, computed } from vue; export const useChatStore defineStore(chat, () { // 状态 const messageList ref([]); // 对话消息列表 const currentInput ref(); // 用户当前输入 const isLoading ref(false); // 是否正在加载用于非流式 const isStreaming ref(false); // 是否正在流式输出用于流式 // 计算属性 const chatHistory computed(() { // 将消息列表格式化成API需要的 {role, content} 格式只保留最近N轮 return messageList.value .filter(msg msg.role ! error) .map(msg ({ role: msg.role, content: msg.content })) .slice(-10); // 只保留最近10轮对话防止上下文过长 }); // 动作 const addMessage (role, content) { messageList.value.push({ id: Date.now() Math.random(), role, // user 或 assistant content, timestamp: new Date(), }); }; const addErrorMessage (content) { messageList.value.push({ id: Date.now() Math.random(), role: error, content, timestamp: new Date(), }); }; const clearMessages () { messageList.value []; }; const updateLastMessage (newContent) { // 用于流式输出时不断更新最后一条助手消息的内容 const lastMsg messageList.value[messageList.value.length - 1]; if (lastMsg lastMsg.role assistant) { lastMsg.content newContent; } }; return { // 状态 messageList, currentInput, isLoading, isStreaming, // 计算属性 chatHistory, // 动作 addMessage, addErrorMessage, clearMessages, updateLastMessage, }; });这个Store把聊天相关的数据和方法都集中管理起来了。messageList存所有消息chatHistory会自动把它转换成API需要的格式并且只截取最近10轮这是个实用的小技巧避免上下文太长导致模型性能下降或API费用增加。3.2 实现聊天组件最后我们来创建核心的聊天界面组件。在src/components目录下创建Phi3Chat.vue。!-- src/components/Phi3Chat.vue -- template div classchat-container !-- 消息展示区域 -- div classmessages-area refmessagesEndRef div v-formsg in messageList :keymsg.id :class[message-bubble, msg.role] div classmessage-avatar span v-ifmsg.role user/span span v-else-ifmsg.role assistant/span span v-else⚠️/span /div div classmessage-content !-- 用户和错误消息直接显示 -- template v-ifmsg.role ! assistant {{ msg.content }} /template !-- 助手消息如果是流式输出中的最后一条用v-html渲染包含可能的光标 -- template v-else div v-ifisStreaming msg.id streamingMessageId v-htmlformatStreamingContent(msg.content)/div div v-else{{ msg.content }}/div /template /div /div !-- 加载指示器非流式时显示 -- div v-ifisLoading !isStreaming classloading-indicator div classloading-dots span/spanspan/spanspan/span /div 思考中... /div /div !-- 输入区域 -- div classinput-area textarea v-modelcurrentInput keydown.enter.exact.preventhandleSend placeholder输入你的问题...按Enter发送ShiftEnter换行 :disabledisLoading || isStreaming rows3 /textarea div classinput-actions button clickhandleSend :disabled!canSend classsend-button 发送 /button button clickhandleClear classclear-button 清空对话 /button label classstream-toggle input typecheckbox v-modeluseStreaming / 启用流式输出 /label /div /div /div /template script setup import { ref, computed, nextTick, watch } from vue; import { useChatStore } from /stores/chatStore; import { sendChatRequest, sendStreamChatRequest } from /utils/phi3Service; const chatStore useChatStore(); const { messageList, currentInput, isLoading, isStreaming, addMessage, addErrorMessage, clearMessages, updateLastMessage } chatStore; // 本地状态 const useStreaming ref(true); // 是否使用流式输出 const streamingMessageId ref(null); // 当前正在流式输出的消息ID const messagesEndRef ref(null); // 用于滚动到底部的DOM引用 // 计算属性是否可以发送消息 const canSend computed(() { return currentInput.value.trim() ! !isLoading.value !isStreaming.value; }); // 方法滚动到消息底部 const scrollToBottom () { nextTick(() { if (messagesEndRef.value) { messagesEndRef.value.scrollTop messagesEndRef.value.scrollHeight; } }); }; // 方法格式化流式内容可以在这里加光标动画 const formatStreamingContent (content) { // 简单处理可以在这里加一个闪烁的光标 return content span classblinking-cursor|/span; }; // 方法处理发送消息非流式 const handleSendNormal async () { const userMessage currentInput.value.trim(); if (!userMessage) return; // 1. 清空输入框添加用户消息到列表 currentInput.value ; addMessage(user, userMessage); scrollToBottom(); // 2. 设置加载状态 isLoading.value true; addMessage(assistant, ); // 先添加一条空消息占位 scrollToBottom(); try { // 3. 调用API const history chatStore.chatHistory.slice(0, -1); // 获取发送前的历史 const fullResponse await sendChatRequest(userMessage, history); // 4. 更新最后一条助手消息 updateLastMessage(fullResponse); } catch (error) { // 5. 出错处理 console.error(对话出错:, error); // 移除刚才添加的占位助手消息 messageList.value.pop(); // 添加错误消息 addErrorMessage(请求失败: ${error.message}); } finally { // 6. 重置状态 isLoading.value false; scrollToBottom(); } }; // 方法处理发送消息流式 const handleSendStream async () { const userMessage currentInput.value.trim(); if (!userMessage) return; currentInput.value ; addMessage(user, userMessage); scrollToBottom(); // 添加一条初始为空的助手消息并记录其ID addMessage(assistant, ); streamingMessageId.value messageList.value[messageList.value.length - 1].id; isStreaming.value true; scrollToBottom(); try { const history chatStore.chatHistory.slice(0, -1); const streamGenerator sendStreamChatRequest(userMessage, history); let fullResponse ; for await (const chunk of streamGenerator) { fullResponse chunk; updateLastMessage(fullResponse); scrollToBottom(); // 每收到一块都滚动一下 } } catch (error) { console.error(流式对话出错:, error); messageList.value.pop(); // 移除占位消息 addErrorMessage(流式请求失败: ${error.message}); } finally { isStreaming.value false; streamingMessageId.value null; scrollToBottom(); } }; // 方法统一的发送处理 const handleSend () { if (!canSend.value) return; if (useStreaming.value) { handleSendStream(); } else { handleSendNormal(); } }; // 方法清空对话 const handleClear () { if (isLoading.value || isStreaming.value) { if (!confirm(正在生成回复确定要清空吗)) return; } clearMessages(); }; // 监听消息列表变化自动滚动到底部 watch(messageList, () { scrollToBottom(); }, { deep: true }); /script style scoped .chat-container { display: flex; flex-direction: column; height: 600px; max-width: 800px; margin: 0 auto; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; background-color: #fafafa; } .messages-area { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } .message-bubble { display: flex; gap: 12px; max-width: 85%; } .message-bubble.user { align-self: flex-end; flex-direction: row-reverse; } .message-bubble.assistant { align-self: flex-start; } .message-bubble.error { align-self: center; max-width: 95%; background-color: #fff2f0; border: 1px solid #ffccc7; border-radius: 8px; padding: 10px 16px; } .message-avatar { width: 36px; height: 36px; border-radius: 50%; background-color: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .message-bubble.user .message-avatar { background-color: #1890ff; color: white; } .message-bubble.assistant .message-avatar { background-color: #52c41a; color: white; } .message-content { padding: 12px 16px; border-radius: 18px; background-color: white; box-shadow: 0 1px 3px rgba(0,0,0,0.1); line-height: 1.5; word-break: break-word; } .message-bubble.user .message-content { background-color: #1890ff; color: white; border-bottom-right-radius: 4px; } .message-bubble.assistant .message-content { border-bottom-left-radius: 4px; } .input-area { border-top: 1px solid #e0e0e0; padding: 16px; background-color: white; } .input-area textarea { width: 100%; padding: 12px; border: 1px solid #d9d9d9; border-radius: 8px; resize: none; font-family: inherit; font-size: 14px; box-sizing: border-box; margin-bottom: 12px; } .input-area textarea:focus { outline: none; border-color: #1890ff; } .input-actions { display: flex; justify-content: space-between; align-items: center; } .send-button, .clear-button { padding: 8px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; transition: background-color 0.2s; } .send-button { background-color: #1890ff; color: white; } .send-button:hover:not(:disabled) { background-color: #40a9ff; } .send-button:disabled { background-color: #bae7ff; cursor: not-allowed; } .clear-button { background-color: #f5f5f5; color: #666; } .clear-button:hover { background-color: #e8e8e8; } .stream-toggle { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #666; } .loading-indicator { display: flex; align-items: center; gap: 10px; color: #999; font-size: 14px; padding: 10px 0; align-self: center; } .loading-dots { display: inline-flex; gap: 4px; } .loading-dots span { width: 8px; height: 8px; border-radius: 50%; background-color: #1890ff; animation: bounce 1.4s infinite ease-in-out both; } .loading-dots span:nth-child(1) { animation-delay: -0.32s; } .loading-dots span:nth-child(2) { animation-delay: -0.16s; } keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } } .blinking-cursor { animation: blink 1s infinite; color: #999; } keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /style这个组件把前面封装的工具和状态都用起来了。界面分成了消息展示区和输入区。消息区能区分用户、助手和错误消息并且支持流式输出的打字机效果。输入区有文本框、发送按钮、清空按钮和一个切换流式/非流式模式的复选框。关键逻辑在handleSendStream函数里它用for await...of循环来消费我们之前封装的那个流式生成器每收到一个文本块就实时更新界面上的消息内容体验就很流畅。4. 集成与使用组件写好了最后一步就是把它用起来。假设你有一个App.vue或者某个页面组件可以这么引入!-- 例如在 src/App.vue 中 -- template div idapp header h1Phi-3 Mini 智能对话/h1 p基于 Phi-3-mini-128k-instruct 模型构建的对话演示/p /header main Phi3Chat / /main /div /template script setup import Phi3Chat from ./components/Phi3Chat.vue; /script style /* 一些全局样式 */ body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, sans-serif; background-color: #f5f5f5; } #app { padding: 20px; } header { text-align: center; margin-bottom: 30px; } /style记得确保你的后端服务已经启动并且API地址VITE_API_BASE_URL配置正确。然后运行npm run dev一个功能完整的AI对话前端就跑起来了。5. 总结与扩展思路走完这一套流程你应该能在Vue3项目里比较顺畅地集成大模型API了。这套方案把网络请求、状态管理和UI组件分得比较清楚后续维护或者加新功能都方便。实际用下来流式输出的体验确实比等全部生成完再显示要好得多用户感知到的响应速度更快。对话历史管理那个截取最近N轮的小技巧也挺实用能平衡效果和性能。如果你还想进一步扩展有几个方向可以考虑一个是加个消息持久化把对话记录存到localStorage或者IndexedDB里关掉页面再打开还能看到。另一个是优化UI比如支持消息复制、代码高亮、或者引用消息。如果对话场景复杂可能还需要实现函数调用Function Calling的支持那就在服务层和组件里相应增加处理逻辑。总的来说前端调用大模型API的核心就是处理好异步通信和状态同步。把基础打牢后面的扩展就是水到渠成的事了。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。