详细介绍:Vue 主应用中同时支持 qiankun 子应用与 iframe 子应用的加载方案

在之前的文章中,我已经介绍过如何在主应用 SubAppView.vue 中通过 qiankun来加载微前端子应用:
主应用加载 qiankun 子应用的实现方案

重点介绍如何在实际项目中,就是本文不再赘述 qiankun 部分,而同时存在 qiankun 应用和 iframe 应用的混合场景,以及如何借助路由实现外链跳转。

通过这样,一个主应用就能够同时拥护三种子应用接入方式:

  • qiankun 子应用

  • iframe 子应用

  • 外链新窗口子系统


一、为什么要支持 iframe 子应用

在多数情况下,我们推荐子应用以qiankun 微前端方式接入,主应用与子应用之间可以共享状态、无缝跳转。

但在一些场景下:

  • 历史遗留平台,难以改造为微前端

  • 外部第三方平台,不方便统一接入 qiankun

  • 不需和主应用深度集成,只要轻松嵌入

此时 iframe 嵌入就是一个现实可行的方案。

所以,我在 SubAppView.vue 中做了扩展,能够根据不同子应用配置,动态选择:

  • qiankun 模式加载子应用

  • iframe 模式嵌入子系统</

posted @ 2025-10-01 14:36  ycfenxi  阅读(19)  评论(0)    收藏  举报