介绍基于 uni-app、Vue3 和 DeepSeek API 构建的跨端 AI 流式对话系统模板。项目支持 Web、小程序及 Android 端运行，具备深浅色主题切换、深度思考链、KaTeX 数学公式渲染及代码高亮复制功能。通过配置.env 文件中的 API Key 即可接入 DeepSeek-V3.2 模型，实现流式打字效果。技术栈包含 Vite5、Pinia2、uv-ui 组件库及 mp-html 解析器，解决了小程序 rich-text 限制问题，适合快速搭建多端 AI 应用。
基于最新
uni-app+vue3+uv-ui+markdown-it+mp-html接入deepseek api聊天大模型，搭建跨三端 ai 流式对话系统。提供浅色 + 深色主题、新增深度思考链、katex 数学公式、代码复制/高亮、链接/图片预览，支持运行到web+ 小程序端 + 安卓端。
使用最新 uniapp+vue3 搭建项目模板，接入 deepseek-v3.2 大模型。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
支持运行到 h5+ 小程序 + 安卓端。
支持运行到 web 端以750px 排版居中布局。
申请 deepseek apikey 并替换项目根目录下.env 文件里的 key，即可体验跨端 ai 流式对话。
# 项目名称
VITE_APPNAME='Uniapp-DeepSeek'
# 运行端口
VITE_PORT=5173
# DeepSeek API 配置
VITE_DEEPSEEK_API_KEY= 替换为你的 APIKey
VITE_DEEPSEEK_BASE_URL= https://api.deepseek.com
<template>
<uv3-layout>
<!-- 导航栏 -->
<template #header>
<Toolbar :title="chatSession?.title"/>
</template>
<view v-if="chatSession && !isEmpty(chatSession.data)" class="vu__chatview flexbox flex-col">
<scroll-view :scroll-into-view="scrollIntoView" scroll-y="true" @scrolltolower="onScrollToLower" @scroll="onScroll" style="height: 100%;">
<view class="vu__chatbot">...</view>
<view id="scrollbottom-placeholder" style="height: 1px;"></view>
</scroll-view>
<!-- 滚动到底部 -->
<view class="vu__scrollbottom" @click="scrollToBottom">
<text class="iconfont ai-arrD fw-700"></text>
</view>
</view>
<!-- 欢迎信息 -->
<view v-else class="vu__welcomeinfo">
<view class="intro flex-c flex-col">
<view class="logo flex-c" style="gap: 15px;">
<view class="iconfont ai-deepseek" style="font-size: 40px;"></view>
<text style="color: #999; font-size: 20px;">+</text>
<image src="/static/uni.png" mode="widthFix" style="height: 30px; width: 30px;"/>
</view>
<view class="name"><text class="txt text-gradient">嘿~ Uniapp-DeepSeek</text></view>
<view class="desc">我可以帮你写代码、答疑解惑、写作各种创意内容，请把你的任务交给我吧~</view>
</view>
<view class="prompt">
<view class="tip flex-c">
<text class="flex1">试试这样问</text>
<view class="flex-c" @click="refreshPrompt">换一换<uni-icons type="refreshempty" color="#999" size="14"/></view>
</view>
<view v-for="(item,index) in promptList" :key="index">
<view class="option" @click="changePrompt(item.prompt)">{{item.emoji}}{{item.prompt}}<text class="arrow iconfont ai-arrR c-999"></text></view>
</view>
</view>
</view>
<template #footer>
<view :style="{'padding-bottom': keyboardHeight + 'px'}">
<ChatEditor ref="editorRef" v-model="promptValue" :scrollBottom="scrollToBottom"/>
</view>
</template>
</uv3-layout>
</template>
rich-text 组件在小程序中有一些限制，改为使用 mphtml 和 markdown-it 组件解析标签结构。亲测完美支持在 H5 端 + 小程序端+App 端流式。
<template>
<view class="ua__markdown">
<mp-html :content="parseNodes" @linktap="handleLinkTap"/>
</view>
</template>
const props = defineProps({
// 解析内容
source: String,
// 是否显示代码块行号 (关闭后性能更优)
showLine: {
type: [Boolean, String],
default: true
},
// 开启 katex
katex: {
type: Boolean,
default: true
},
// markdown-it 插件配置
plugins: {
type: Array,
default: () => []
}
})
小程序端使用 uni.request 开启 enableChunked 实现流式。
// #ifdef MP-WEIXIN
try {
this.loading = true
this.answerText = ''
this.reasoningText = ''
this.lastUpdate = 0
// 发起新请求前终止旧请求
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: this.chatState.thinkingEnabled ? 'deepseek-reasoner' : 'deepseek-chat',
stream: true, // 流式输出
max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数 (默认使用 4096)
temperature: 0.4 // 严谨采样 越低越严谨 (默认 1)
},
enableChunked: true, // 开启分块传输 transfer-encoding chunked
success: (res) => {
const { statusCode } = res
if (statusCode !== 200) {
// 手动处理错误码
console.error('请求失败，状态码:', statusCode)
this.loading = false
this.answerText = ''
this.reasoningText = ''
uni.showToast({ title: errorMsgCode[statusCode], icon: 'none' })
return
}
console.log('request success', res)
},
fail: (error) => {
console.log('request fail', error)
this.loading = false
this.answerText = ''
this.reasoningText = ''
uni.showToast({ title: error.errMsg, icon: 'none' })
}
})
requestTask.onChunkReceived((res) => {
// console.log('Received chunk', res)
// ...
})
} catch (error) {
this.loading = false
this.chatState.updateSession(this.botKey, { loading: false })
throw new Error(`request error: ${error.message || '请求异常'}`)
}
// #endif
