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

最新原创vite7.2集成deepseek-v3.2聊天大模型搭建本地网页版Ai对话。

deepseek-vue3-webai：运用vite7.2+vue3.5+arco-design集成deepseek-v3.2打造网页版ai系统。提供浅色/暗黑两种主题、深度思考R1、代码高亮/复制、Latex数学公式、Mermaid图表渲染。

技术栈

• 编辑器：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

项目特色

1. 最新版Vite7.2接入DeepSeek流式输出，性能更丝滑流畅
2. 提供暗黑+浅色两种主题、侧边栏收缩
3. 支持丰富Markdown样式，代码高亮/复制/收缩功能
4. 新增思考模式DeepSeek-R1
5. 支持Katex数学公式
6. 支持Mermaid各种甘特图/流程图/类图等图表
7. 使用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'){// ...}}

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