2026款网页版AI Chat对话|Vite7+Vue3+DeepSeek-R1纯手搓web版流式ai聊天系统

优质文章学习记录

06 Apr 2026 — 8 min read

技术栈

编辑器：VScode
前端框架：vite^7.2.4+vue3.5.24+vue-router^4.6.4
大模型框架：DeepSeek-R1 + OpenAI
组件库：arco-design^2.57.0 (字节桌面端组件库)
状态管理：pinia^3.0.4
本地存储：pinia-plugin-persistedstate^4.7.1
高亮插件：highlight.js^11.11.1
markdown插件：markdown-it
katex公式：@mdit/plugin-katex^0.24.1

项目特色

最新版Vite7.2接入DeepSeek流式输出，性能更丝滑流畅
提供暗黑+浅色两种主题、侧边栏收缩
支持丰富Markdown样式，代码高亮/复制/收缩功能
新增思考模式DeepSeek-R1
支持Katex数学公式
支持Mermaid各种甘特图/流程图/类图等图表
使用arco-design组件库，风格统一，美观大气

项目结构框架

使用最新vite7.2构建项目，集成deepseek-v3.2 chat大模型。

vite7-webseek网页端ai项目已经更新到我的原创作品集，欢迎下载使用。

原创vite7+vue3+deepseek网页版ai对话模板

项目deepseek key配置

如上图：替换下项目根目录下.env文件里的deepseek apikey即可体验ai流式对话。

# title VITE_APP_TITLE='Vue3-Web-DeepSeek' # port VITE_PORT=3001 # 运行时自动打开浏览器 VITE_OPEN=true # 开启https VITE_HTTPS=false # 是否删除生产环境 consoleVITE_DROP_CONSOLE=true # DeepSeek API配置 VITE_DEEPSEEK_API_KEY= 替换为你的 API Key VITE_DEEPSEEK_BASE_URL= https://api.deepseek.com

项目布局模板

项目布局结构如下图所示：

<script setup>import Sidebar from'@/layouts/components/sidebar/index.vue'</script><template><div class="vu__container"><div class="vu__layout flexbox flex-col"><div class="vu__layout-body flex1 flexbox"><!-- 侧边区域 --><Sidebar /><!-- 主面板区域 --><div class="vu__layout-main flex1"><router-view v-slot="{ Component, route }"><keep-alive><component :is="Component":key="route.path"/></keep-alive></router-view></div></div></div></div></template>

vue3实现deepseek深度思考模式

// 调用deepseek接口const completion =await openai.chat.completions.create({// 单一会话/* messages: [ {role: 'user', content: editorValue} ], */// 多轮会话 messages: props.multiConversation ? historySession.value :[{role:'user', content: editorValue}],// deepseek-chat对话模型 deepseek-reasoner推理模型 model: sessionstate.thinkingEnabled ?'deepseek-reasoner':'deepseek-chat', stream:true,// 流式输出 max_tokens:8192,// 一次请求中模型生成 completion 的最大 token 数(默认使用 4096) temperature:0.4,// 严谨采样})

vue3-deepseek集成katex和mermaid插件

import{ katex }from"@mdit/plugin-katex";// 支持数学公式import'katex/dist/katex.min.css'// 渲染mermaid图表import{ markdownItMermaidPlugin }from'@/components/markdown/plugins/mermaidPlugin'

渲染流式输出Markdown。

<Markdown :source="item.content":html="true":linkify="true":typographer="true":plugins="[[katex,{delimiters:'all'}],[markdownItMermaidPlugin,{...}]]" @copy="onCopy"/>

exportconstmarkdownItMermaidPlugin=(md, options)=>{const defaultFence = md.renderer.rules.fence md.renderer.rules.fence=(...args)=>{const[tokens, idx]= args const token = tokens[idx]const lang = token.info.replace(/\[.*\]/,'').trim()||''if(lang ==='mermaid'){const code = token.content.trim()const hash =generateHash(code)const uuid =`${hash}-${Date.now()}-${Math.random().toString(36).substring(2,9)}`// 如果有缓存，加载缓存图表if(renderCache.has(hash)){// console.log('加载缓存mermaid图表')return`${defaultFence(...args)} <div>${renderCache.get(hash)}</div> `}nextTickRender(uuid)return`${defaultFence(...args)} <div> <div>📊Mermaid 图表加载中...</div> </div> `}returndefaultFence(...args)}functionnextTickRender(containerId){// 如果容器存在，直接渲染if(document.getElementById(containerId)){renderMermaidDiagram(containerId)return}// 使用MutationObserver监听DOM更新const observer =newMutationObserver((mutations, ob)=>{const container = document.getElementById(containerId)if(container){ ob.disconnect()renderMermaidDiagram(containerId)}}) observer.observe(document.body,{ childList:true, subtree:true})}asyncfunctionrenderMermaidDiagram(containerId){const container = document.getElementById(containerId)if(!container){console.warn(`Mermaid container #${containerId} not found`)return}const code =decodeURIComponent(container.dataset.mermaidCode)const hash = container.dataset.mermaidHash if(!code){return}// 检查 mermaid 是否可用if(typeof window.mermaid ==='undefined'){showError(container,'Mermaid 库未加载!')return}try{// 配置 mermaid（如果还未配置）if(!window.mermaid.initialized){ window.mermaid.initialize({ startOnLoad:false, theme:'default', securityLevel:'loose',}) window.mermaid.initialized =true}let svg // 检查缓存if(renderCache.has(hash)){ svg = renderCache.get(hash)}else{const{ isValid }=awaitverifyMermaid(code)if(!isValid){showError(container,`<pre>渲染语法错误：\n${ code }\n</pre>`)return}// 使用唯一ID渲染(避免图表冲突)const{svg: renderedSvg}=await window.mermaid.render(`mermaid-${containerId}`, code) svg = renderedSvg renderCache.set(hash, svg)} container.innerHTML = svg container.removeAttribute('data-mermaid-hash') container.removeAttribute('data-mermaid-code')// 触发回调if(options?.reachBottom){ options?.onRender?.()}}catch(error){console.error('Mermaid 渲染失败:', error)showError(container,`<pre>渲染图表时出错: \n ${error.message}\n</pre>`)}}}

vue3调用deepseek api

// 调用deepseek接口const completion =await openai.chat.completions.create({// 单一会话// messages: [{role: 'user', content: editorValue}],// 多轮会话 messages: props.multiConversation ? historySession.value :[{role:'user', content: editorValue}],// deepseek-chat对话模型 deepseek-reasoner推理模型 model: sessionstate.thinkingEnabled ?'deepseek-reasoner':'deepseek-chat', stream:true,// 流式输出 max_tokens:8192, temperature:0.4})

处理流式生成内容。

forawait(const chunk of completion){// 检查是否已终止if(sessionstate.aborted)breakconst content = chunk.choices[0]?.delta?.content ||''// 获取推理内容const reasoningContent = chunk.choices[0]?.delta?.reasoning_content ||''if(content || reasoningContent){ answerText += content reasoningText += reasoningContent // 限制更新频率：每100ms最多更新一次const now = Date.now()if(now - lastUpdate >100){ lastUpdate = now requestAnimationFrame(()=>{// ...})}}if(chunk.choices[0]?.finish_reason ==='stop'){// ...}}