经过半个多月爆肝研发,原创跨端ai新作uniapp+vue3+deepseek搭建app版流式输出ai模板。
使用技术
- 编辑器:HbuilderX 4.57
- 技术框架:Uniapp+Vue3+Pinia2+Vite5.x
- 大模型框架:DeepSeek-V3
- UI组件库:uni-ui+uv-ui
- 高亮插件:highlight.js
- markdown解析:ua-markdown
- 本地缓存:pinia-plugin-unistorage
- 支持编译:H5+小程序+APP端
功能性
- 支持编译到H5/小程序端/App端
- 支持各种代码高亮、上下文多轮对话/本地会话存储
- 支持代码块横向滚动、行号、代码复制功能(h5/app端)
- 支持图片渲染宽度100%、图片预览功能(h5/app端)
- 支持链接跳转功能(h5/app端)
- 修复小程序端表格边框线及各类标签选择器样式失效
项目框架目录
支持在pc端以750px显示页面布局。
入口配置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 } }
uniapp环境变量.env
# 项目名称 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>
uniapp小程序端流式
uniapp在小程序端流式,通过uni.request开启enableChunked: true分块传输。
// #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
Ok,以上就是uniapp+vue3对接deepseek实现流式ai对话的一些分享,感谢阅读与支持!