Skip to content

createQiankunVueApp

创建同时支持 qiankun 微前端子应用独立部署的 Vue 3 应用入口(bootstrap / mount / unmount 生命周期)。

前置依赖

调用方注入 Vue 生态与 qiankun 插件运行时(非 shared 内 import):

参数名类型说明
AppVue 根组件子应用根 SFC
createAppVue createApp创建应用实例
createPiniaPinia 工厂状态管理
createAppRouter(routerBase?) => Router按主应用 routerBase 创建路由
documentDOM Document创建 #app 挂载点
renderWithQiankunvite-plugin-qiankun注册生命周期
qiankunWindow__POWERED_BY_QIANKUN__判断是否 qiankun 模式

环境要求

  • Vue 3vue-routerpinia
  • vite-plugin-qiankun

函数签名

typescript
function createQiankunVueApp(options: CreateQiankunVueAppOptions): void

interface QiankunProps {
  container?: unknown
  routerBase?: string
  [key: string]: unknown
}

参数

参数名类型必填说明
optionsCreateQiankunVueAppOptions见上表

返回值

类型说明
void副作用:注册 qiankun 生命周期;独立运行时直接 render

工作原理

  1. mount:从 props.container 查找或创建 #appcreateApp + Pinia + Router 后 mount。
  2. 独立部署:无 container 时 mount 到页面 #app,routerBase 由 createAppRouter 默认处理。
  3. unmount:销毁实例并清空 container 内 DOM。
  4. qiankunWindow:非 qiankun 时仍调用 render,保证单页可独立访问。
  5. render 失败时 console.error 并 rethrow,便于主应用捕获。

异常

mount 阶段配置错误会抛出原始异常。