uniapp-vue3-deepseek 实战：对接 DeepSeek-V3 实现跨端 AI 对话

**uniapp-vue3-deepseek** 实战2025对话ai大模型，基于Uniapp+Vue3+Markdown接入DeepSeek-V3聊天会话大模型，支持**编译到H5+小程序+App端**。实现流式输出、支持亮色/暗黑主题、代码高亮、会话本地存储等功能。 ### 三端预览 编译到**H5+小程序端+App端**运行效果。  > > > ### *基于vue3.5+deepseek搭建网页版ai对话模板* > > > [vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果](https://www.cnblogs.com/xiaoyan2017/p/18795796) > > > ### *Electron35+Vite6+DeepSeek-V3跨平台桌面端AI流式输出模板* > > > [Electron35-DeepSeek桌面端AI系统|vue3.5+electron+arco客户端ai模板](https://www.cnblogs.com/xiaoyan2017/p/18830611) > ### 技术栈 - 开发工具：Hbuilder X 4.57 - 技术框架：Uniapp+Vue3+Pinia2+Vite5.x - 大模型框架：DeepSeek-V3 - UI组件库：uni-ui+uv-ui - 高亮插件：highlight.js - markdown解析：ua-markdown - 本地缓存：pinia-plugin-unistorage - 支持编译：H5+小程序+APP端   deepseek-uniapp使用最新跨端技术uniapp接入deepseek-v3对话模型，支持编译h5/小程序/app端。   ### 项目特点 1. 基于Uniapp+Vue3构建，对接DeepSeek-V3实现流式输出效果 2. 支持编译到H5/小程序端/App端 3. 支持各种代码高亮、上下文多轮对话/本地会话存储 4. 支持代码块横向滚动、行号、代码复制功能(h5/app端) 5. 支持图片渲染宽度100%、图片预览功能(h5/app端) 6. 支持链接跳转功能(h5/app端) 7. 修复小程序端表格边框线及各类标签选择器样式失效  ### 项目框架结构 uni-deepseek使用 uniapp 搭建项目模板，采用 vue3 setup 语法开发。  > > > #### *uniapp-deepseek跨端ai助手已经同步到我的原创作品集，感谢支持与鼓励~* > > > [uniapp+deepseek+vue3跨端AI流式输出对话模板](https://mall.bilibili.com/neul-next/detailuniversal/detail.html?isMerchant=1&page=detailuniversal_detail&saleType=10&itemsId=12307813&loadingShow=1&noTitleBar=1&msource=merchant_share) >  支持h5在pc端以**750px宽度**显示布局。    ### uniapp环境变量.env配置  在uniapp+vue3项目中，支持.env环境变量配置。 ```csharp # 项目名称 VITE_APPNAME = 'Uniapp-DeepSeek' # 运行端口 VITE_PORT = 5173 # DeepSeek API配置 VITE_DEEPSEEK_API_KEY = 替换为你的APIKey VITE_DEEPSEEK_BASE_URL = https://api.deepseek.com ``` ### 入口文件main.js ```csharp import App from './App' import { createSSRApp } from 'vue' // 引入pinia状态管理 import pinia from '@/pinia' export function createApp() { const app = createSSRApp(App) app.use(pinia) return { app, pinia } } ```   ### 项目布局结构  整个项目布局分为**顶部自定义导航栏+会话内容区+底部编辑区**三个大模块。  ```csharp ```  ### uniapp+vue3解析markdown结构 uniapp+deepseek流式输出数据，通过之前封装的markdown-it组件解析标签结构。亲测**完美支持在H5端+小程序端+App端**流式Markdown解析。  修复微信小程序里rich-text组件不支持标签选择器，导致样式会失效问题。 **特性** - 支持代码块横向滚动 - 支持显示代码行号(关闭提升性能) - 支持代码复制功能(h5/app端) - 支持图片渲染宽度100% - 支持图片预览功能(h5/app端) - 支持链接跳转功能(h5/app端)             ### uniapp+deepseek实现流式SSE输出 原本打算使用OpenAI来实现流式输出，但在小程序和App不支持该功能。 由于小程序和app运行环境特殊性，最终选择在小程序端使用uni.request开启 enableChunked 实现流式，H5和App端采用 renderjs 方式fetch来实现流式功能。 ```csharp // H5和APP端调用renderjs里的fetch // #ifdef APP-PLUS || H5 this.fetchAppH5({ url: baseURL+'/v1/chat/completions', method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${apiKEY}`, }, body: { // 多轮会话 messages: this.multiConversation ? this.historySession : [{role: 'user', content: editorValue}], model: 'deepseek-chat', // deepseek-chat对话模型 deepseek-reasoner推理模型 stream: true, // 流式输出 max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096) temperature: 0.4, // 严谨采样 越低越严谨(默认1) } }) // #endif ``` ```csharp // #ifdef MP-WEIXIN try { this.loading = true const requestTask = await uni.request({ url: baseURL+'/v1/chat/completions', method: 'POST', header: { "Content-Type": "application/json", "Authorization": `Bearer ${apiKEY}`, }, data: { // 多轮会话 messages: this.multiConversation ? this.historySession : [{role: 'user', content: editorValue}], model: 'deepseek-chat', // deepseek-chat对话模型 deepseek-reasoner推理模型 stream: true, // 流式输出 max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096) temperature: 0.4, // 严谨采样 越低越严谨(默认1) }, enableChunked: true, //开启分块传输 transfer-encoding chunked success: (res) => { console.log('request success', res) }, fail: (error) => { console.log('request fail', error) // ... } }) requestTask.onChunkReceived((res) => { // console.log('Received chunk', res) const uint8Array = new Uint8Array(res.data) let text = String.fromCharCode.apply(null, uint8Array) const buffer = decodeURIComponent(escape(text)) this.parseBuffer(buffer) }) } catch (error) { this.loading = false this.chatState.updateSession(this.botKey, {loading: false}) throw new Error(`request error: ${error.message || '请求异常'}`) } // #endif ```    以上就是uniapp+vue3对接deepseek实现流式ai对话的一些知识分享，希望对大家有些帮助哈！