应为每个微应用分配专属 teleport 容器并由主应用统一管理，卸载时优先触发 vue unmount 保证清理，禁用共享容器与沙箱冲突场景下的 teleport。

在微前端架构中（如 qiankun、icestark），多个微应用可能共用同一个主应用的 DOM 容器（比如 #app），而每个微应用若都使用 <teleport to="body"></teleport>，就容易引发 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"></teleport>），辅助清理

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！