createQiankunVueApp
创建同时支持 qiankun 微前端子应用与独立部署的 Vue 3 应用入口(bootstrap / mount / unmount 生命周期)。
前置依赖
调用方注入 Vue 生态与 qiankun 插件运行时(非 shared 内 import):
| 参数名 | 类型 | 说明 |
|---|---|---|
App | Vue 根组件 | 子应用根 SFC |
createApp | Vue createApp | 创建应用实例 |
createPinia | Pinia 工厂 | 状态管理 |
createAppRouter | (routerBase?) => Router | 按主应用 routerBase 创建路由 |
document | DOM Document | 创建 #app 挂载点 |
renderWithQiankun | vite-plugin-qiankun | 注册生命周期 |
qiankunWindow | 含 __POWERED_BY_QIANKUN__ | 判断是否 qiankun 模式 |
环境要求
- Vue 3、vue-router、pinia
- vite-plugin-qiankun
函数签名
typescript
function createQiankunVueApp(options: CreateQiankunVueAppOptions): void
interface QiankunProps {
container?: unknown
routerBase?: string
[key: string]: unknown
}参数
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
options | CreateQiankunVueAppOptions | 是 | 见上表 |
返回值
| 类型 | 说明 |
|---|---|
void | 副作用:注册 qiankun 生命周期;独立运行时直接 render |
工作原理
- mount:从
props.container查找或创建#app,createApp+ Pinia + Router 后 mount。 - 独立部署:无 container 时 mount 到页面
#app,routerBase 由createAppRouter默认处理。 - unmount:销毁实例并清空 container 内 DOM。
- qiankunWindow:非 qiankun 时仍调用 render,保证单页可独立访问。
- render 失败时
console.error并 rethrow,便于主应用捕获。
异常
mount 阶段配置错误会抛出原始异常。