应为每个微应用分配专属 Teleport 容器并由主应用统一管理，卸载时优先触发 Vue unmount 保证清理，禁用共享容器与沙箱冲突场景下的 Teleport。
在微前端架构中（如 qiankun、icestark），多个微应用可能共用同一个主应用的 DOM 容器（比如 #app），而每个微应用若都使用 <Teleport to="body">，就容易引发 DOM 节点冲突——比如多个弹窗同时挂载到 body 下，相互覆盖、事件监听错乱、样式叠加、甚至卸载时残留节点。
明确隔离 Teleport 目标容器
不要让所有微应用都往同一个公共位置（如 body）传送。应为每个微应用分配专属的挂载容器，由主应用统一创建并管理：
- 主应用在加载微应用前，动态创建唯一 ID 的容器，例如：
<div id="micro-app-1-portal"></div> - 将该容器插入
body底部（或指定安全位置），确保不干扰其他微应用 - 通过 props 或全局配置，把该容器 ID 传给对应微应用（如
portalId: 'micro-app-1-portal'） - 微应用内使用：
<Teleport :to="'#' + portalId">…</Teleport>
微应用卸载时主动清理 Teleport 内容
Vue 的 Teleport 在组件销毁时会自动从目标容器移除内容，但前提是目标容器仍存在且未被主应用提前清空。若主应用在卸载微应用时直接 innerHTML = '' 或 remove() 整个容器，会导致 Teleport 卸载逻辑失效，残留 DOM。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 主应用卸载微应用前，应先触发其 Vue 实例的
unmount()（qiankun 中可通过lifeCycles.unmount钩子） - 确保微应用根组件完全销毁，让 Teleport 的
unmounted生命周期正常执行 - 避免直接操作目标容器 DOM；如需清理，优先调用 Vue 卸载流程，再移除空容器
禁用 Teleport 或降级处理（适配运行时环境）
某些微前端沙箱（如 qiankun 的 strictStyleIsolation）会劫持 document.body.appendChild 等原生 API，导致 Teleport 查找目标失败或挂载异常。
立即学习“前端免费学习笔记（深入）”；
- 可在微应用启动时检测沙箱环境：
if (window.__POWERED_BY_QIANKUN__) {...} - 对关键 Teleport 组件添加
:disabled="isInSandbox"，使其回退到普通嵌套渲染（配合局部 z-index/overflow 处理） - 或改用更稳妥的目标：如挂载到微应用自己的根容器（
to="#micro-app-root"），虽牺牲部分全局性，但规避沙箱限制
避免多个 Teleport 渲染到同一容器的竞态问题
当多个 Teleport 实例指向同一个目标（如都用 to="#shared-portal"），它们会按渲染顺序追加内容，但卸载时无法精确控制谁删谁——尤其在异步组件、条件渲染下易出现残留。
- 禁止跨微应用共享 Teleport 容器；每个微应用独占一个
- 如确需跨应用通信式弹窗（如主应用触发微应用内 Toast），应由主应用提供统一 Portal 服务，微应用只调用接口，不自行挂载
- 使用
key强制重置 Teleport 内容（如<Teleport :to="portal" :key="uuid">），辅助清理
