如何用uniapp deepseek Vue3实现跨平台AI流式对话的？
- 内容介绍
- 文章标签
- 相关推荐
基于uniapp+vue3集成deepseek-v3打造跨端AI流式对话系统，简直是一场技术盛宴！支持暗黑+亮色模式、 代码高亮、本地会话存储等功能，让你的应用瞬间高大上。更牛的是它能编译到小程序+h5+app端一招多用，省时省力，挖野菜。。
效果展示
躺平。 编译到h5/小程序/app端的效果简直惊艳，让人眼前一亮。
H5端效果
小程序端效果
App端效果
项目搭建
使用uniapp+vue3搭建项目模板， 集成deepseek大语言模型，这一步至关重要，绝了...。
先说说 我们来配置一下项目的.env文件：
# 项目名称
VITE_APP不结盟E = 'Uniapp-DeepSeek'
# 运行端口
VITE_PORT = 5173
# DeepSeek API配置
VITE_DEEPSEEK_API_KEY = 替换为你的APIKey
VITE_DEEPSEEK_BASE_URL = https://api.deepseek.com然后我们在main.js中引入pinia状态管理：
import App from './App'
import { createSSRApp } from 'vue'
// 引入pinia状态管理
import pinia from '@/pinia'
export function createApp {
const app = createSSRApp
app.use
return {
app,
pinia
}
}核心代码解析
我们来看看核心代码是如何实现的。
模板部分
...
...
H5+App端的实现方式
| H5/App平台 | Coding方式 |
|---|---|
| H5+APP端 | // H5和APP端调用renderjs里的fetch // #ifdef APP-PLUS || H5 { url: baseURL+'/v1/chat/completions', method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${apiKEY}` }, body: { messages: ? : , model: 'deepseek-chat', stream: true, max_tokens: 8192, temperature: 0.4 } } |
| 微信小程序 | // #ifdef MP-WEIXIN { url: baseURL+'/v1/chat/completions', method: 'POST', header: { "Content-Type": "application/json", "Authorization": `Bearer ${apiKEY}` }, data: { messages:? : ,model:'deepseek-chat',stream:true,temperature:.4 } } |
| 支付宝小程序 | // #ifdef MP-ALIPAY { url:"/v1/chat/completions",method:"POST",headers:{Authorization:`Bearer ${apiKEY}`} data:{messages:,model:"deepseek-chat",stream:true} } |
| 百度小程序 | // #ifdef MP-BAIDU { url:"/v1/chat/completions",method:"POST",header:{Authorization:`Bearer ${apiKEY}`} data:{messages:,model:"deepseek-chat",stream:true} } |
| 抖音/头条小程序 | // #ifdef MP-TOUTIAO { url:"/v1/chat/completions",method:"POST",header:{Authorization:`Bearer ${apiKEY}`} data:{messages:,model:"deepseek-chat",stream:true} } |
各平台差异化Coding一览表
其他相关产品及模板实例列表
注：以上所有产品、技术及功能模块均不含任何广告。
声明：本文提及的品牌及商标均属其各自合法持有人之财产， 仅用于说明及演示特定产品或技术方案， 不靠谱。 并或疑问，请留言交流.
基于uniapp+vue3集成deepseek-v3打造跨端AI流式对话系统，简直是一场技术盛宴！支持暗黑+亮色模式、 代码高亮、本地会话存储等功能，让你的应用瞬间高大上。更牛的是它能编译到小程序+h5+app端一招多用，省时省力，挖野菜。。
效果展示
躺平。 编译到h5/小程序/app端的效果简直惊艳，让人眼前一亮。
H5端效果
小程序端效果
App端效果
项目搭建
使用uniapp+vue3搭建项目模板， 集成deepseek大语言模型，这一步至关重要，绝了...。
先说说 我们来配置一下项目的.env文件：
# 项目名称
VITE_APP不结盟E = 'Uniapp-DeepSeek'
# 运行端口
VITE_PORT = 5173
# DeepSeek API配置
VITE_DEEPSEEK_API_KEY = 替换为你的APIKey
VITE_DEEPSEEK_BASE_URL = https://api.deepseek.com然后我们在main.js中引入pinia状态管理：
import App from './App'
import { createSSRApp } from 'vue'
// 引入pinia状态管理
import pinia from '@/pinia'
export function createApp {
const app = createSSRApp
app.use
return {
app,
pinia
}
}核心代码解析
我们来看看核心代码是如何实现的。
模板部分
...
...
H5+App端的实现方式
| H5/App平台 | Coding方式 |
|---|---|
| H5+APP端 | // H5和APP端调用renderjs里的fetch // #ifdef APP-PLUS || H5 { url: baseURL+'/v1/chat/completions', method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${apiKEY}` }, body: { messages: ? : , model: 'deepseek-chat', stream: true, max_tokens: 8192, temperature: 0.4 } } |
| 微信小程序 | // #ifdef MP-WEIXIN { url: baseURL+'/v1/chat/completions', method: 'POST', header: { "Content-Type": "application/json", "Authorization": `Bearer ${apiKEY}` }, data: { messages:? : ,model:'deepseek-chat',stream:true,temperature:.4 } } |
| 支付宝小程序 | // #ifdef MP-ALIPAY { url:"/v1/chat/completions",method:"POST",headers:{Authorization:`Bearer ${apiKEY}`} data:{messages:,model:"deepseek-chat",stream:true} } |
| 百度小程序 | // #ifdef MP-BAIDU { url:"/v1/chat/completions",method:"POST",header:{Authorization:`Bearer ${apiKEY}`} data:{messages:,model:"deepseek-chat",stream:true} } |
| 抖音/头条小程序 | // #ifdef MP-TOUTIAO { url:"/v1/chat/completions",method:"POST",header:{Authorization:`Bearer ${apiKEY}`} data:{messages:,model:"deepseek-chat",stream:true} } |
各平台差异化Coding一览表
其他相关产品及模板实例列表
注：以上所有产品、技术及功能模块均不含任何广告。
声明：本文提及的品牌及商标均属其各自合法持有人之财产， 仅用于说明及演示特定产品或技术方案， 不靠谱。 并或疑问，请留言交流.