当前位置：首页 > news >正文

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

news 2026/3/26 18:40:52

技术栈

编辑器：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.2chat大模型。

vite7-webseek网页端ai项目已经更新到我的原创作品集，欢迎下载使用。
原创vite7+vue3+deepseek网页版ai对话模板

项目deepseek key配置

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

# titleVITE_APP_TITLE='Vue3-Web-DeepSeek'# portVITE_PORT=3001# 运行时自动打开浏览器VITE_OPEN=true# 开启httpsVITE_HTTPS=false# 是否删除生产环境consoleVITE_DROP_CONSOLE=true# DeepSeekAPI配置VITE_DEEPSEEK_API_KEY=替换为你的APIKeyVITE_DEEPSEEK_BASE_URL=https://api.deepseek.com

项目布局模板

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

<script setup>importSidebarfrom'@/layouts/components/sidebar/index.vue'</script><template><divclass="vu__container"><divclass="vu__layout flexbox flex-col"><divclass="vu__layout-body flex1 flexbox"><!--侧边区域--><Sidebar/><!--主面板区域--><divclass="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接口constcompletion=awaitopenai.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)=>{constdefaultFence=md.renderer.rules.fence md.renderer.rules.fence=(...args)=>{const[tokens,idx]=argsconsttoken=tokens[idx]constlang=token.info.replace(/\[.*\]/,'').trim()||''if(lang==='mermaid'){constcode=token.content.trim()consthash=generateHash(code)constuuid=`${hash}-${Date.now()}-${Math.random().toString(36).substring(2,9)}`// 如果有缓存，加载缓存图表if(renderCache.has(hash)){// console.log('加载缓存mermaid图表')return`${defaultFence(...args)}<div class="mermaid-container">${renderCache.get(hash)}</div>`}nextTickRender(uuid)return`${defaultFence(...args)}<div class="mermaid-container" id="${uuid}">${hash}">${encodeURIComponent(code)}"> <div class="mermaid-loading">📊Mermaid 图表加载中...</div> </div>`}returndefaultFence(...args)}functionnextTickRender(containerId){// 如果容器存在，直接渲染if(document.getElementById(containerId)){renderMermaidDiagram(containerId)return}// 使用MutationObserver监听DOM更新constobserver=newMutationObserver((mutations,ob)=>{constcontainer=document.getElementById(containerId)if(container){ob.disconnect()renderMermaidDiagram(containerId)}})observer.observe(document.body,{childList:true,subtree:true})}asyncfunctionrenderMermaidDiagram(containerId){constcontainer=document.getElementById(containerId)if(!container){console.warn(`Mermaid container #${containerId}not found`)return}constcode=decodeURIComponent(container.dataset.mermaidCode)consthash=container.dataset.mermaidHashif(!code){return}// 检查 mermaid 是否可用if(typeofwindow.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}letsvg// 检查缓存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}=awaitwindow.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接口constcompletion=awaitopenai.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(constchunkofcompletion){// 检查是否已终止if(sessionstate.aborted)breakconstcontent=chunk.choices[0]?.delta?.content||''// 获取推理内容constreasoningContent=chunk.choices[0]?.delta?.reasoning_content||''if(content||reasoningContent){answerText+=content reasoningText+=reasoningContent// 限制更新频率：每100ms最多更新一次constnow=Date.now()if(now-lastUpdate>100){lastUpdate=nowrequestAnimationFrame(()=>{// ...})}}if(chunk.choices[0]?.finish_reason==='stop'){// ...}}

Ok，以上就是vite7+vue3接入deepseek搭建网页版ai系统的一些项目分享，感谢大家的阅读与支持。

往期推荐

基于uni-app+vue3+deepseek+uv-ui仿DeepSeek流式AI聊天模板
2026最新版vite7.2+vue3.5+deepseek-v3.2+markdown移动端流式AI对话模板
最新款Electron38+Vue3+Vite7+ElementPlus客户端中后台管理系统
Electron38-Vue3Chat电脑端聊天|vite7+electron38+pinia3仿微信
基于Electron38.2+Vite7+Vue3+ArcoDesign客户端OS系统
基于uni-app+vue3+pinia2+uv-ui仿抖音app短视频+聊天+直播商城系统
2025最新款Tauri2.9+Vite7.2+Vue3 setup+ArcoDesign电脑版os后台解决方案
基于tauri2+vite7.1+vue3 setup+pinia3+element-plus电脑端聊天系统
Tauri2-Vite7Admin客户端管理后台|tauri2.9+vue3+element-plus后台系统
最新版vite7-vue3-webos网页版仿macos系统|Vite7+Pinia3+Arco网页os
2025跨端uniapp+vue3+uv-ui实战仿微信app聊天模板
基于uniapp+vue3跨端手机admin管理系统uniapp-vue3os
基于flutter3.32+window_manager+get仿macOS/wins桌面os系统
最新flutter3.27+get+bitsdojo_window电脑版仿微信聊天EXE

查看全文

http://www.jsqmd.com/news/211576/