前言
移动端演示 http://8.146.211.120:8081/#/
管理端演示 http://8.146.211.120:8088/#/
项目整体介绍及演示
前面的文章我们主要完成了基础模块的开发 这次我们跟一下热点 创建AI聊天机器人 并嵌入到我们的uniapp中
首先需要了解dify我已经完成了搭建win10 VMware安装ubuntu24部署 dify
1.先去dify后台创建一个应用
2.配置模型运营商 deepseek 的最简单 开通配置apikey即可
3.编排聊天机器人的能力
4.设置语言图标等
5.选择嵌入 到我们的页面中
由于嵌套代码是html 且uniapp vue文件中只能存在一个script标签
我们将代码放到项目的index.hml里
bash
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="referrer" content="no-referrer">
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<title></title>
<!--preload-links-->
<!--app-context-->
<script>
window.difyChatbotConfig = {
token: ''
}
</script>
<script
src="https://udify.app/embed.min.js"
id=""
defer>
</script>
<style>
#dify-chatbot-bubble-button {
background-color: #FF2442 !important;
top:85% !important;
}
#dify-chatbot-bubble-window {
width: 24rem !important;
height: 40rem !important;
}
</style>
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>这样完成ai聊天机器人的搭建了
后面我们实现支持图片 回复、聊天