简单大模型对话框实现遇到的问题,叠在一起让现象变得比较迷惑,梳理一下:
1. 前端响应式绑定错误(核心bug)
assistantMsg 最初是个普通对象 (既不是ref也不是reactive),被push进数组后,后续content += delta的修改完全绕过了Vue的响应式追踪。表现为:流式数据其实正常在后台一块块到达,但界面全程不刷新,直到isStreaming.value = false触发整体重渲染,才"唰"一下把完整内容显示出来------也就是你说的"一整段蹦出来"。
修复 :用reactive()包装assistantMsg。
2. 历史消息里的脏数据
因为问题1,每次流式失败,那个内容为空的assistant占位对象都会永久留在messages数组里,后续请求会把这些空消息一起发给模型,污染上下文。
修复 :发送前用.filter()过滤掉空内容的消息。
3. 后端SSE响应头不完整
server/api/chat.post.ts里最初只设置了Content-Type,缺少X-Accel-Buffering: no和Cache-Control: no-transform,存在被中间层(Nginx/代理)缓冲导致流式失效的隐患。
修复:补全防缓冲的响应头。
4. API Key 与账户余额问题
依次遇到:
- 401 鉴权失败:key本身无效(可能是复制粘贴出错,或是key类型/平台不匹配)
- 402 余额不足:DeepSeek官方key本身有效,但账户没钱,而DeepSeek目前也没有长期免费额度
解决:换成阿里云百炼(免费额度大、支持DeepSeek/千问等多模型)的API Key和对应baseURL。