等AI回复卡顿到劝退？Vue3+DeepSeek流式输出实战，70行代码实现打字机效果-拓冰建站

前言

做AI对话页面时，你是不是踩过这个大坑：
发送提问后页面空白转圈，复杂推理要等十几秒才一次性吐出全部文字，用户流失率巨高。

市面上很多教程只给简单demo，没处理网络分片截断、环境变量配置、双向绑定、流结束标记等真实业务问题。

读完本文你能收获：

彻底搞懂LLM流式输出底层原理，不用等整段返回，逐字实时渲染
Vite+Vue3完整可运行代码，兼容DeepSeek官方流式接口
解决分片JSON截断、API密钥管理、SSE解析4个高频踩坑点
吃透Vue3组件、ref响应式、v-model双向绑定核心知识点

一、什么是流式输出？为什么必须做？

1.1 普通一次性请求的痛点

常规接口请求逻辑：
客户端完整发送请求 → LLM完整推理全部token → 一次性返回完整文本

推理耗时久，页面长时间空白，用户极易退出
大篇幅回答等待时间成倍拉长，体验极差

1.2 流式输出核心逻辑

把服务器和前端比作一根水管：
LLM每生成一个文字token，立刻通过HTTP分块传输（SSE）推送到前端
前端持续拼接文字，实现打字机逐字蹦字效果

简单理解：
一次性返回 = 接满一桶水再端给你
流式输出 = 水管持续流水，边流边看

1.3 前后端约定规则

客户端请求参数携带stream: true开启流式模式
服务端返回SSE格式数据流，每行以data:开头
全部输出完毕，服务端推送[DONE]标记流结束

二、前置环境准备（Vite项目）

2.1 环境变量配置（安全存放API Key）

项目根目录新建.env.local文件，写入DeepSeek密钥：

# .env.local VITE_DEEPSEEK_API_KEY=sk-你的DeepSeek密钥

关键规则（必看，90%人踩坑）

Vite仅识别**VITE_**前缀的环境变量，无前缀无法在前端读取
.env.local加入.gitignore，禁止上传到代码仓库，避免密钥泄露
前端直接存放密钥仅适用于本地demo，生产环境需后端代理中转接口

2.2 项目基础依赖

# 创建vue3 vite项目npmcreate vite@latest ai-stream-demo ----templatevuecdai-stream-demonpminstallnpmrun dev

三、完整实战代码（App.vue 可直接复制运行）

<template> <div class="container"> <!-- 输入区域 v-model双向绑定提问 --> <div class="input-box"> <label>用户提问：</label> <input type="text" class="input" v-model="question" placeholder="请输入你的问题" /> <button @click="update">提交提问</button> </div> <!-- 流式开关控制 --> <div class="stream-switch"> <label>开启流式输出：</label> <input type="checkbox" v-model="stream" /> <span v-if="stream">当前打字机模式已启用</span> </div> <!-- AI输出区域 --> <div class="output-box"> <label>AI回答：</label> <div class="output-content">{{ content }}</div> </div> <!-- Vue响应式演示 --> <div class="count-demo"> <p>响应式计数：{{ count }}</p> <button @click="count++">点击数字+1</button> </div> </div> </template> <script setup> // Vue3核心响应式API import { ref } from 'vue' // 双向绑定变量 const stream = ref(false) // 是否开启流式 const content = ref('') // AI返回内容 const question = ref('讲一个关于奶龙的小故事') // 用户提问 const count = ref(0) // 响应式数字演示 // 5秒后自动修改数字，验证响应式自动更新 setTimeout(() => { count.value = 100 }, 5000) // 提交请求核心方法 const update = async () => { // 空提问拦截 if (!question.value.trim()) return content.value = 'AI正在思考中...' // DeepSeek官方接口地址 const endpoint = 'https://api.deepseek.com/v1/chat/completions' const headers = { 'Content-Type': 'application/json', 'Authorization': `Bearer ${import.meta.env.VITE_DEEPSEEK_API_KEY}` } // 发起POST请求 const response = await fetch(endpoint, { method: 'POST', headers, body: JSON.stringify({ model: 'deepseek-v4-flash', messages: [{ role: 'user', content: question.value }], stream: stream.value // 流式开关传递给大模型接口 }) }) // 分支：流式输出 / 一次性输出 if (stream.value) { content.value = '' // 获取二进制可读流读取器 const reader = response.body?.getReader() // 二进制转文本解码器 const decoder = new TextDecoder() let done = false // 缓存分片半截数据，解决JSON截断问题 let buffer = '' // 循环读取流，直到服务端推送结束标记 while (!done && reader) { const result = await reader.read() done = result.done // 解码本次二进制数据，拼接缓存 buffer += decoder.decode(result.value, { stream: !done }) // 按换行分割SSE单行数据 const lines = buffer.split('\n') // 未完成的半截数据留在buffer，下一轮拼接 buffer = lines.pop() || '' // 遍历每一行有效消息 for (const line of lines) { // 过滤非data开头的无效行 if (!line.startsWith('data:')) continue const data = line.slice(5).trim() // DeepSeek流结束标识，终止循环 if (data === '[DONE]') { done = true break } // 解析增量文本，追加到页面 const chunk = JSON.parse(data) content.value += chunk.choices[0]?.delta?.content || '' } } } else { // 非流式：一次性接收完整返回 const data = await response.json() content.value = data.choices[0].message.content } } </script> <style scoped> .container { width: 90%; max-width: 800px; margin: 30px auto; } .input-box, .stream-switch, .output-box, .count-demo { margin-bottom: 20px; } .input { width: 70%; padding: 8px 12px; margin: 0 10px; } .output-content { margin-top: 8px; padding: 12px; border: 1px solid #eee; border-radius: 6px; min-height: 120px; white-space: pre-wrap; } </style>

四、代码核心模块拆解（边学Vue边懂流式）

4.1 Vue3 .vue组件三大核心部分

每一个.vue文件由三块组成，也是前端工程化基础：

template 模板
写页面结构，支持{{}}单向数据渲染、v-model双向绑定、@click事件绑定
数据驱动页面，无需手动操作DOM，数据改变页面自动刷新
script setup
Vue3语法糖，自动导出变量，模板可直接使用内部ref变量
ref()定义响应式基础数据，修改.value触发页面更新
style scoped
scoped限定样式仅作用于当前组件，避免全局样式污染