Vue.js前端开发集成MusePublic大模型API实战-平芜编程栈

Vue.js前端开发集成MusePublic大模型API实战

1. 为什么前端要直接调用大模型API

你有没有遇到过这样的情况：后端同事说“这个接口得等两天才能上线”，而你手头的AI功能原型已经卡在那儿好几天了？或者产品突然想加个实时对话框，结果发现所有逻辑都得绕一圈走后端代理，响应慢得像在等咖啡煮好？

其实很多大模型API，包括MusePublic提供的服务，是支持前端直连的。不是所有AI功能都非得经过后端中转——尤其当你只是做原型验证、内部工具或轻量级应用时，让Vue应用直接和大模型对话，反而更简单、更灵活。

这不意味着要放弃后端，而是多一种选择。比如你正在做一个内部知识问答小面板，用户输入问题，页面立刻返回结构化答案；又或者你在设计一个创意文案生成器，希望用户能实时看到不同风格的文案对比。这些场景里，前端直连省去了接口开发、鉴权透传、错误重试封装等中间环节，开发节奏快得多。

当然，安全边界得划清楚：敏感数据不出浏览器、密钥不硬编码、请求频率有节制、超时和错误有兜底。这些不是障碍，而是现代前端本该具备的基本能力。Vue生态里有成熟的方案来应对，后面都会展开讲。

2. 搭建一个能“说话”的Vue应用

2.1 初始化项目与依赖准备

我们从一个干净的Vue 3项目开始（推荐使用create-vue脚手架，它比老版本更轻量、更现代）。如果你已经有项目，跳过这步即可。

npm create vue@latest # 一路回车选默认，记得选 TypeScript 和 Pinia（状态管理） cd your-project-name npm install

接下来安装两个关键依赖：

axios：处理HTTP请求，比原生fetch更易用，尤其对错误拦截和请求配置友好
@vueuse/core：提供开箱即用的组合式API，比如useAsyncState帮你自动管理异步状态，避免手写loading/error/data三件套

npm install axios @vueuse/core

别急着写API调用，先确认一件事：MusePublic API是否允许前端跨域调用？打开它的文档，找“CORS”或“浏览器兼容性”相关说明。如果明确写了支持Origin: *或列出了常见前端域名，那就没问题；如果没提，可以先本地启动服务测试，多数公开大模型API为开发者考虑，已默认放开。

2.2 封装安全的API调用层

密钥绝不能写死在代码里——这是铁律。但Vue前端又没法像Node.js那样读取环境变量文件。怎么办？我们用“运行时注入”方式：在index.html的<script>标签里注入一个全局配置对象，由部署时的CI/CD或Nginx注入真实值。

<!-- public/index.html --> <script> window.__APP_CONFIG__ = { MUSE_PUBLIC_API_KEY: 'your-real-key-here', // 实际部署时替换 MUSE_PUBLIC_API_BASE: 'https://api.musepublic.com/v1' } </script>

然后在src/utils/api.ts里创建统一入口：

// src/utils/api.ts import axios from 'axios' const api = axios.create({ baseURL: window.__APP_CONFIG__.MUSE_PUBLIC_API_BASE, timeout: 15000, headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${window.__APP_CONFIG__.MUSE_PUBLIC_API_KEY}` } }) // 请求拦截：自动添加时间戳防缓存 api.interceptors.request.use(config => { config.params = { ...config.params, t: Date.now() } return config }) // 响应拦截：统一错误处理 api.interceptors.response.use( response => response, error => { if (error.response?.status === 401) { console.error('API密钥无效，请检查配置') } else if (error.code === 'ECONNABORTED') { console.error('请求超时，请稍后重试') } return Promise.reject(error) } ) export default api

这样既避免了密钥泄露风险，又保持了调用的简洁性。后续所有请求都基于这个api实例，不用重复写baseURL和header。

2.3 构建核心交互组件

我们来实现一个最典型的场景：用户输入提示词（prompt），点击发送，实时流式返回大模型的回答。重点不是炫技，而是让体验自然——像和真人聊天一样，文字逐字出现，而不是等全部生成完才刷出来。

在src/components/ChatBox.vue里：

<script setup lang="ts"> import { ref, onMounted, onUnmounted } from 'vue' import api from '@/utils/api' const inputText = ref('') const messages = ref<{ role: 'user' | 'assistant'; content: string }[]>([]) const isLoading = ref(false) const abortController = ref<AbortController | null>(null) // 发送消息 const sendMessage = async () => { if (!inputText.value.trim()) return // 添加用户消息 messages.value.push({ role: 'user', content: inputText.value }) isLoading.value = true abortController.value = new AbortController() try { const response = await api.post('/chat/completions', { model: 'muse-public-llm-v2', messages: messages.value.map(m => ({ role: m.role, content: m.content })), stream: true // 关键：启用流式响应 }, { signal: abortController.value.signal }) // 流式处理：逐块接收并拼接 const reader = response.data.getReader() let accumulated = '' while (true) { const { done, value } = await reader.read() if (done) break const chunk = new TextDecoder().decode(value) accumulated += chunk // 简单解析SSE格式（假设返回类似data: {"delta":"hello"}\n\n） const lines = accumulated.split('\n') accumulated = lines.pop() || '' for (const line of lines) { if (line.startsWith('data: ')) { try { const json = JSON.parse(line.slice(6)) if (json.delta) { // 更新最后一条assistant消息 const lastMsg = messages.value[messages.value.length - 1] if (lastMsg?.role === 'assistant') { lastMsg.content += json.delta } else { messages.value.push({ role: 'assistant', content: json.delta }) } } } catch (e) { // 忽略解析失败的行（如event: message） } } } } } catch (error) { if (error.name !== 'AbortError') { messages.value.push({ role: 'assistant', content: '抱歉，网络出问题了，可以再试一次吗？' }) } } finally { isLoading.value = false abortController.value = null } } // 清空对话 const clearChat = () => { messages.value = [] inputText.value = '' } // 组件卸载时取消请求 onUnmounted(() => { if (abortController.value) { abortController.value.abort() } }) </script> <template> <div class="chat-container"> <div class="messages"> <div v-for="(msg, index) in messages" :key="index" :class="['message', msg.role]" > <strong>{{ msg.role === 'user' ? '你' : 'AI' }}：</strong> <p v-html="msg.content.replace(/\n/g, '<br>')"></p> </div> <div v-if="isLoading" class="message assistant"> <strong>AI：</strong> <p>思考中<span class="typing">...</span></p> </div> </div> <div class="input-area"> <textarea v-model="inputText" placeholder="输入你的问题或指令，比如：用三句话解释量子计算" @keydown.enter.prevent="sendMessage" rows="2" /> <div class="controls"> <button @click="clearChat" :disabled="isLoading">清空</button> <button @click="sendMessage" :disabled="isLoading || !inputText.trim()"> {{ isLoading ? '发送中...' : '发送' }} </button> </div> </div> </div> </template> <style scoped> .chat-container { display: flex; flex-direction: column; height: 100%; max-width: 800px; margin: 0 auto; padding: 1rem; } .messages { flex: 1; overflow-y: auto; padding: 0.5rem 0; } .message { margin-bottom: 1rem; padding: 0.75rem; border-radius: 8px; line-height: 1.5; } .message.user { background: #e6f7ff; margin-left: auto; max-width: 80%; } .message.assistant { background: #f5f5f5; margin-right: auto; max-width: 80%; } .input-area { margin-top: 1rem; } textarea { width: 100%; padding: 0.75rem; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 1rem; resize: none; } .controls { display: flex; gap: 0.5rem; margin-top: 0.5rem; } button { padding: 0.5rem 1rem; border: none; border-radius: 4px; background: #1890ff; color: white; cursor: pointer; } button:disabled { background: #d9d9d9; cursor: not-allowed; } .typing::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 2px; background: #1890ff; border-radius: 50%; animation: typing 1.4s infinite; } @keyframes typing { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } </style>

这个组件做了几件关键的事：

支持流式响应，文字像打字一样逐字出现，体验更真实
自动处理请求中断（比如用户切页或点取消），避免内存泄漏
错误有友好提示，不暴露技术细节给用户
样式简洁，适配移动端，没有花哨动画干扰核心交互

3. 让结果不只是文字：可视化与结构化呈现

大模型返回的常常不只是纯文本。它可能是一段带格式的Markdown、一个JSON结构化的数据、甚至是一组需要渲染的图表参数。如果只用<p>标签原样输出，就浪费了它的潜力。

3.1 渲染带格式的内容

假设用户问：“生成一份Python快速入门清单”，MusePublic返回的可能是Markdown格式的列表。我们可以用marked库轻松渲染：

npm install marked

在组件里引入并使用：

import { marked } from 'marked' // 在处理响应时 if (json.delta) { const html = marked.parse(json.delta) // 然后更新DOM（注意：需用v-html，确保内容可信） }

但要注意：v-html有XSS风险。所以我们在src/utils/safeHtml.ts里加一层过滤：

// src/utils/safeHtml.ts import DOMPurify from 'dompurify' export function sanitizeHTML(html: string): string { return DOMPurify.sanitize(html, { ALLOWED_TAGS: ['p', 'br', 'ul', 'ol', 'li', 'strong', 'em', 'code', 'pre'], ALLOWED_ATTR: ['class'] }) }

这样既保留了基础排版，又杜绝了恶意脚本执行。

3.2 解析结构化输出

有时候我们需要模型返回结构化数据，比如用户问：“分析以下销售数据并给出前三名城市”，我们希望它返回JSON而不是一段话。这时可以在prompt里明确要求：

请严格按以下JSON格式返回结果，不要任何额外文字：
{ "top_cities": [{"name": "上海", "revenue": 1200000}], "summary": "..." }

然后在前端用JSON.parse()尝试解析。为防模型偶尔“不听话”，加个容错：

const tryParseJSON = (text: string) => { try { // 提取第一个```json```到```之间的内容 const match = text.match(/```json\s*([\s\S]*?)\s*```/) if (match) return JSON.parse(match[1]) return JSON.parse(text) } catch (e) { console.warn('JSON解析失败，返回原始文本', e) return { raw: text } } }

解析成功后，就可以用Vue的v-for动态渲染表格、卡片或图表了。比如把top_cities渲染成一个数据表格，比纯文字直观十倍。

4. 状态管理：不只是loading和data

当应用变复杂，比如你同时有多个AI功能模块（文案生成、图片描述、代码解释），每个都有自己的请求状态、历史记录、配置选项，靠组件内ref就力不从心了。这时候Pinia就派上用场了。

4.1 创建AI功能Store

在src/stores/ai.ts里：

import { defineStore } from 'pinia' import api from '@/utils/api' interface ChatSession { id: string title: string messages: Array<{ role: 'user' | 'assistant'; content: string }> createdAt: Date } export const useAiStore = defineStore('ai', { state: () => ({ sessions: [] as ChatSession[], activeSessionId: '', isProcessing: false }), getters: { activeSession: (state) => { return state.sessions.find(s => s.id === state.activeSessionId) || null } }, actions: { createNewSession(title: string = '新对话') { const id = Date.now().toString() const session: ChatSession = { id, title, messages: [], createdAt: new Date() } this.sessions.unshift(session) this.activeSessionId = id }, addMessage(role: 'user' | 'assistant', content: string) { if (!this.activeSession) return this.activeSession.messages.push({ role, content }) }, async sendPrompt(prompt: string) { if (!this.activeSession) return this.isProcessing = true try { const res = await api.post('/chat/completions', { model: 'muse-public-llm-v2', messages: [ { role: 'user', content: prompt } ] }) const reply = res.data.choices?.[0]?.message?.content || '无响应' this.addMessage('assistant', reply) } catch (error) { this.addMessage('assistant', '出错了，请稍后重试') } finally { this.isProcessing = false } } } })

现在，任何组件都可以用const ai = useAiStore()访问全局AI状态，切换对话、保存历史、批量操作都变得轻而易举。而且Pinia的devtools支持时间旅行调试，查问题快得飞起。

5. 性能与体验优化：不只是“能用”

一个AI应用好不好，不只看功能全不全，更看它“顺不顺”。用户输入后，是秒回还是卡顿三秒？网络不好时，是直接报错还是优雅降级？这些细节决定了用户会不会愿意天天用。

5.1 请求节流与防抖

用户狂敲回车怎么办？连续点五次发送按钮？我们加个简单的防抖：

// src/utils/debounce.ts export function debounce<T extends (...args: any[]) => any>( func: T, wait: number ): (...args: Parameters<T>) => void { let timeout: NodeJS.Timeout | null = null return function executedFunction(...args: Parameters<T>) { const later = () => { clearTimeout(timeout!) func(...args) } if (timeout) clearTimeout(timeout) timeout = setTimeout(later, wait) } } // 在组件里 const debouncedSend = debounce(sendMessage, 500)

这样即使用户连点，也只会触发最后一次点击，避免重复请求压垮API。

5.2 离线与弱网支持

用navigator.onLine监听网络状态，配合localStorage缓存最近几次对话：

// 组件onMounted时 onMounted(() => { const saved = localStorage.getItem('ai-chat-history') if (saved) { try { messages.value = JSON.parse(saved) } catch (e) { console.warn('缓存解析失败') } } const handleOnline = () => { console.log('网络恢复') } const handleOffline = () => { console.log('网络断开，已启用离线模式') } window.addEventListener('online', handleOnline) window.addEventListener('offline', handleOffline) })

虽然离线时无法调用API，但至少用户不会丢失刚写好的长篇输入，体验更安心。

6. 实战之外：几个容易踩的坑

写完一个能跑的Demo只是开始。真正上线前，有几个现实问题必须面对：

第一，密钥轮换怎么搞？
MusePublic控制台应该支持生成多个密钥并设置有效期。前端不能硬编码，建议在CI/CD流程里，把密钥注入到构建产物的index.html中，每次发布都是新密钥，旧密钥可立即停用。

第二，错误提示太技术化？
别让用户看到“429 Too Many Requests”这种字眼。统一映射成：“今天调用次数用完了，明天自动恢复”或“服务器有点忙，两秒后再试”。

第三，移动端键盘遮挡输入框？
iOS Safari有个经典bug：软键盘弹出会把<textarea>顶出可视区。解决方案很简单，在mounted里加：

onMounted(() => { const textarea = document.querySelector('textarea') if (textarea) { textarea.addEventListener('focus', () => { setTimeout(() => { textarea.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) }, 100) }) } })

这些不是“高级技巧”，而是让应用从“能用”走向“好用”的必经之路。