我用 Vue3 做了一个 AI 对话工作台

一、为什么做这个项目

作为一名前端开发，我希望通过一个实际项目，把 Vue3 和 AI 结合起来。一方面是想亲手做一个类似 DeepSeek 的对话工具，另一方面也是为技术转型做准备——前端正在被 AI 改变，我想提前掌握这个能力。

二、技术栈

• 前端：Vue3 + Vite

• 后端：Node.js + Express

• AI 接口：阿里云百炼（通义千问 qwen-turbo）

• Markdown 渲染：marked.js

• 代码高亮：highlight.js

• 数据持久化：localStorage

三、核心功能展示

• 对话界面

• 多对话切换

• 深色模式

四、难点与解决方案

1. 跨域问题

问题：前端直接调用阿里云百炼 API 时，浏览器报跨域错误。

解决：增加一个 Node.js 中间层，前端请求自己的后端，后端再转发给阿里云。这样既解决了跨域，也保护了 API Key 不暴露在前端。

2. 流式输出（打字机效果）

问题：AI 生成内容需要时间，如果等全部生成完再显示，用户等待体验很差。

解决：

• 后端：请求阿里云时开启 SSE（X-DashScope-SSE: enable），拿到流式响应后，通过 response.body.getReader() 逐块读取，每读到一块就通过 res.write 推送给前端，并设置 Content-Type: text/event-stream。

• 前端：同样用 getReader() 逐块接收，每收到一个数据块就更新 Vue 的响应式数据，页面实时刷新，实现“逐字显示”的效果。

3. 模型名称和返回格式的坑

实际开发中踩了几个坑：

错误信息	原因	解决方案
Model not exist	模型名写成了 deepseek-chat	改为阿里云的正确模型名 qwen-turbo
Cannot read properties of undefined	阿里云返回格式与 DeepSeek 不同	适配阿里云的返回结构：data.output.choices[0].message.content
跨域错误	前端直接调 API	增加 Node.js 代理层

五、项目地址

• 目前为本地运行版本，后续计划部署到线上- GitHub：[待补充]

六、总结与收获

通过这个项目，我最大的感受是：AI 应用的开发并没有想象中那么神秘。

除了流式数据处理这块和传统开发不太一样，其他如前端交互、状态管理、数据存储等，都是熟悉的技术栈。核心就是把 AI 当成一个“特殊的 API”来调用，然后处理它的返回。

对于也想尝试 AI 方向的前端同学，我的建议是：别怕，先动手。遇到问题一个一个解决，跑通了第一个对话，后面的路就好走了。

下一步我计划继续完善联网搜索、对话导出等功能，并尝试部署上线。