基于uniapp+vue3+deepseek api
从0-1实战仿DeepSeek
app流式对话AI模板。uni-app集成deepseek对话大模型。支持暗黑+亮色模式、代码高亮、支持运行到h5+小程序+app端。
electron35集成deepseek-v3+arco搭建桌面端AI流式输出对话助手
vue3.5对接deepseek-chat网页版ai流式聊天会话系统
附上一个演示版视频。
https://www.bilibili.com/video/BV1YxG2zNEZe/?aid=114422055968...
技术栈
- 编辑器:Hbuilderx 4.57
- 前端框架:uni-app+vue3+pinia2+vite5
- 大模型框架:DeepSeek-V3
- 组件库:uni-ui+uv-ui
- 高亮插件:highlight.js
- markdown解析:ua-markdown
- 本地缓存:pinia-plugin-unistorage
- 支持编译:H5+小程序+APP端
功能性
- 使用uni-app+vue3搭建项目模板,集成DeepSeek-V3实现流式输出效果
- 支持编译H5+小程序端+App端
- 支持各种代码高亮、上下文多轮对话/本地会话存储
- 支持代码块横向滚动、行号、代码复制功能(h5/app端)
- 支持图片渲染宽度100%、图片预览功能(h5/app端)
- 支持链接跳转功能(h5/app端)
- 修复小程序端表格边框线及各类标签选择器样式失效
项目框架目录
uniapp-deepseek跨端ai模板已经发布到我的原创作品集,感谢支持与鼓励。
uniapp+deepseek+vue3跨端AI流式输出对话模板
入口main.js
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
}
}
uni-app+vue3配置.env
在根目录新建一个.env配置文件。去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
支持在pc端以750px宽度显示布局样式。
项目布局模板
<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>
uni-app解析流式markdown
- 支持代码块横向滚动
- 支持显示代码行号(关闭提升性能)
- 支持代码复制功能(h5/app端)
- 支持图片渲染宽度100%
- 支持图片预览功能(h5/app端)
- 支持链接跳转功能(h5/app端)
uniapp集成deepseek跨端流式功能
在uniapp开发三端流式,实现方式有些不一样。小程序可以使用uni.request,h5和app则使用renderjs来实现。
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
小程序流式效果
// #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对接deepseek api实现跨平台流式ai的一些分享知识。开发不易,感谢阅读与支持!
Electron32-MacOS:基于vue3+electron32+arcoDesign仿win/mac桌面os模板
tauri2.0+vue3桌面端后台Exe系统|tauri2+rust+vite5管理系统后台模板
基于uniapp+vue3+uv-ui聊天实例|uni-app+vite4仿微信app应用
原创electron31+vue3+elementPlus仿微信客户端聊天Exe实例
基于electron31+vue3+pinia2桌面端后台管理模板
tauri2.0+vite6客户端仿MacOS桌面|tauri2+rust+vue3桌面os
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。