必须使用dify官方web sdk注入原生dom节点：获取最新token和baseurl，通过main.ts或app.vue中onmounted动态加载embed.min.js脚本，配置difychatbotconfig与difyusercontext，并监听resize更新位置。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在Vue 3项目中让Dify聊天窗口自然融入页面、不跳转不打断用户操作，必须绕过iframe的样式隔离和加载延迟，直接使用Dify官方Web SDK注入原生DOM节点。
获取并验证嵌入配置
登录Dify控制台，进入目标应用的「发布」→「Embed Into Site」页，确认已开启「启用嵌入」开关。此时页面会生成唯一token和baseUrl——【token必须是当前应用下最新生成的，旧token在24小时后自动失效】。复制页面下方显示的完整script标签（含id="dify-chatbot-bubble-button"），不要复制上方iframe的src地址，它不含身份校验，外链访问必然失败。
在Vue 3中注入SDK脚本
打开项目入口文件main.ts或App.vue的<script setup>顶部，在import语句之后、组件定义之前插入以下代码：</script>
const initDifyChatbot = () => {
if ((window as any).difyChatbotConfig) return;
(window as any).difyChatbotConfig = {
token: "YOUR_TOKEN_HERE",
baseUrl: "https://udify.app",
dynamicScript: true,
draggable: true,
dragAxis: "y"
};
const script = document.createElement("script");
script.src = "https://udify.app/embed.min.js?v=" + Date.now();
script.defer = true;
document.body.appendChild(script);
};
onMounted(() => { initDifyChatbot(); });
这一步不能放在onBeforeMount里——因为脚本需挂载到document.body上，而此时body可能尚未就绪；也不能用v-html动态插入script，浏览器会拒绝执行内联脚本。
定制悬浮按钮与窗口样式
方法一：覆盖默认CSS变量
在src/assets/css/dify-custom.css中添加：
#dify-chatbot-bubble-button {
background-color: #2563eb !important;
width: 56px !important;
height: 56px !important;
border-radius: 50% !important;
}
方法二：替换为SVG图标
准备一个16×16像素的SVG文件，上传至public/icons/chat.svg；再添加CSS：
#dify-chatbot-bubble-button::before {
content: url(/icons/chat.svg) !important;
background: none !important;
}
【注意：若未加background: none !important，原蓝色背景会盖住SVG图标】
绑定上下文信息并触发初始化
第一步：在initDifyChatbot()调用前，向window对象写入上下文数据
(window as any).difyUserContext = {
user_id: localStorage.getItem("user_id") || "guest",
page_url: window.location.href,
product_sku: new URLSearchParams(window.location.search).get("sku") || ""
};
第二步：确保脚本加载完成后再触发首次对话
const script = document.querySelector('script[src*="embed.min.js"]');
if (script && script.onload === null) {
script.onload = () => {
setTimeout(() => {(window as any).difyChatbot?.open(), 300);}
};
}
第三步：监听窗口resize事件，防止按钮在移动端错位
window.addEventListener("resize", () => {
if ((window as any).difyChatbot) {
(window as any).difyChatbot.updatePosition();
}
});
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
