uni-app+vue3接入deepseek-v3搭建跨端ai流式(小程序+app+h5)

本文涉及的产品
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
注册配置 MSE Nacos/ZooKeeper,182元/月
任务调度 XXL-JOB 版免费试用,400 元额度,开发版规格
简介: 基于Uniapp+Vue3+Markdown接入DeepSeek-V3聊天大模型,支持编译到H5+小程序+App端。实现流式输出、支持亮色/暗黑主题、代码高亮、会话本地存储等功能。

经过半个多月爆肝研发,原创跨端ai新作uniapp+vue3+deepseek搭建app版流式输出ai模板。


未标题-aa.png

使用技术

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


未标题-2.png


未标题-10.png

p3.gif

功能性

  1. 支持编译到H5/小程序端/App端
  2. 支持各种代码高亮、上下文多轮对话/本地会话存储
  3. 支持代码块横向滚动、行号、代码复制功能(h5/app端)
  4. 支持图片渲染宽度100%、图片预览功能(h5/app端)
  5. 支持链接跳转功能(h5/app端)
  6. 修复小程序端表格边框线及各类标签选择器样式失效


未标题-bb.png

未标题-3.png

项目框架目录

360截图20250428120507488.png

360截图20250428114353756.png

001360截图20250428091340481.png

001360截图20250428091525958.png

002360截图20250428092139934.png

002360截图20250428092506289.png

002360截图20250428092548023.png

002360截图20250428092802046.png

003360截图20250428093154679.png

003360截图20250428093558207.png

006360截图20250427223412312.png

008360截图20250427224122623.png

010360截图20250427225337615.png

012360截图20250427230434133.png


015360截图20250427232513338.png

支持在pc端以750px显示页面布局。

017360截图20250427233321577.png

018360截图20250427233454148.png

018360截图20250427233654819.png

019360截图20250427233822258.png

022360截图20250427235024991.png

入口配置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

24112456b3805c692e370f295d7345b0_1289798-20250429123238198-208491377.png

# 项目名称
VITE_APPNAME = 'Uniapp-DeepSeek'

# 运行端口
VITE_PORT = 5173

# DeepSeek API配置
VITE_DEEPSEEK_API_KEY = 替换为你的APIKey
VITE_DEEPSEEK_BASE_URL = https://api.deepseek.com

未标题-dd.png

项目布局模板

2eb609f0920c9a3d5842360719e6bad2_1289798-20250429123918114-670451265.png

35fe2a0acd5daa8220cb88ee3ef23b53_1289798-20250429124238620-248568351.png

<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>

360截图20250428102859357.png

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对话的一些分享,感谢阅读与支持!



目录
相关文章
|
21天前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
3月前
|
小程序 安全 JavaScript
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
185 1
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
|
3月前
|
人工智能 小程序 前端开发
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
227 0
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
|
4月前
|
存储 人工智能 缓存
tauri2.0+vite6接入deepseek-v3电脑端ai流式多轮聊天对话系统
原创重磅新作tauri2.0+vite6+deepseek-v3+arco-design实战客户端AI流式聊天对话系统。整合 Tauri2.x 接入 DeepSeek-V3 大模型。支持多窗口浅色+暗黑主题、代码高亮、本地会话缓存。
185 5
|
3月前
|
小程序 Java 关系型数据库
圈子系统公众号app小程序系统源码圈子系统带即时通讯 多级圈子系统源码 兴趣小组系统开源 私密圈子系统代码 会员制社区系统
本圈子系统解决方案提供即时通讯、多级圈子、兴趣小组、私密社区及会员制管理功能。支持开源与商业方案,推荐ThinkSNS+、EasyClub及OpenFire等系统,并提供前后端技术选型建议,助力快速搭建社交平台。
141 0
|
5月前
|
存储 人工智能 自然语言处理
flutter3.27接入deepseek-v3跨平台ai流式聊天问答系统
原创基于flutter3.27整合接入deepseek搭建一款高颜值跨平台流式输出ai对话小助手。支持代码高亮、本地会话存储、支持手机端/桌面端显示。 支持markdown代码块高亮、代码块横向滚动、表格边框线、图片100%宽度渲染、图片预览、链接跳转。
337 14
|
9天前
|
人工智能 安全 中间件
阿里云 AI 中间件重磅发布,打通 AI 应用落地“最后一公里”
9 月 26 日,2025 云栖大会 AI 中间件:AI 时代的中间件技术演进与创新实践论坛上,阿里云智能集团资深技术专家林清山发表主题演讲《未来已来:下一代 AI 中间件重磅发布,解锁 AI 应用架构新范式》,重磅发布阿里云 AI 中间件,提供面向分布式多 Agent 架构的基座,包括:AgentScope-Java(兼容 Spring AI Alibaba 生态),AI MQ(基于Apache RocketMQ 的 AI 能力升级),AI 网关 Higress,AI 注册与配置中心 Nacos,以及覆盖模型与算力的 AI 可观测体系。
141 10
|
15天前
|
存储 人工智能 Serverless
函数计算进化之路:AI 应用运行时的状态剖析
AI应用正从“请求-响应”迈向“对话式智能体”,推动Serverless架构向“会话原生”演进。阿里云函数计算引领云上 AI 应用 Serverless 运行时技术创新,实现性能、隔离与成本平衡,开启Serverless AI新范式。
222 12
|
11天前
|
设计模式 机器学习/深度学习 人工智能
AI-Native (AI原生)图解+秒懂: 什么是 AI-Native 应用(AI原生应用)?如何设计一个 AI原生应用?
AI-Native (AI原生)图解+秒懂: 什么是 AI-Native 应用(AI原生应用)?如何设计一个 AI原生应用?