// vue3+vite前端项目使用qiankun加载子项目，如何实现手动加载，子项目的地址http://192.168.200.166/，主项目的地址http://localhost:3000/，activeRule的值是：[ "#/train/plan", "#/train/summary", "#/train/emtresult", "#/drill/apply", "#/drill/scheme", "#/drill/enforce", "#/drill/estimate", "#/drill/record", "#/drill/rfttask", "#/sand/rescue", ], container的值是："#child-app",

在 Vue3 + Vite 的主项目中使用 qiankun 手动加载子项目时，我们需要明确几个关键点：主项目的配置、qiankun 的注册方式、子项目的打包规则以及如何动态加载子应用。 以下是具体的实现步骤： --- ### **一、安装并初始化 Qiankun** 1. 安装 `qiankun` 包： ```bash npm install qiankun --save ``` 2. 在主项目入口文件（例如 `main.ts` 或 `index.ts` 中引入 Qiankun 并进行基础配置）： ```typescript import { registerMicroApps, start } from 'qiankun'; // 注册微应用 registerMicroApps([ { name: 'subApp', // 微应用名称 entry: 'http://192.168.200.166/', // 子项目的地址 activeRule: [ '#/train/plan', '#/train/summary', '#/train/emtresult', '#/drill/apply', '#/drill/scheme', '#/drill/enforce', '#/drill/estimate', '#/drill/record', '#/drill/rfttask', '#/sand/rescue', ], // 激活规则 container: '#child-app', // 渲染容器的选择器 }, ]); // 启动 qiankun start(); ``` --- ### **二、手动加载子项目** 为了更精细地控制子项目的加载过程，我们可以将子项目的加载逻辑封装成异步函数。以下是完整的示例代码： #### **1. 封装加载逻辑** ```typescript // main.ts import { registerMicroApps, runAfterFirstMounted, start } from 'qiankun'; import router from './router'; // 假设你有路由管理 /** * 手动加载子应用的逻辑 */ async function loadSubApp() { try { console.log('[Qiankun] 开始加载子应用...'); // 初始化 qiankun 应用列表 registerMicroApps( [{ name: 'subApp', entry: 'http://192.168.200.166/', activeRule: [ '#/train/plan', '#/train/summary', '#/train/emtresult', '#/drill/apply', '#/drill/scheme', '#/drill/enforce', '#/drill/estimate', '#/drill/record', '#/drill/rfttask', '#/sand/rescue', ], container: '#child-app', }] ); // 启动 qiankun await start(); // 监听第一个子应用挂载完成后的回调 runAfterFirstMounted(() => { console.log('[Qiankun] 第一个子应用已成功加载'); }); } catch (error) { console.error(`[Qiankun] 加载子应用失败`, error); } } // 当页面初次渲染完成后触发加载逻辑 loadSubApp().then(() => { console.log('[Qiankun] 子应用加载完毕'); }); ``` --- ### **三、子项目的改造与适配** 为了让子项目能够正常被主项目加载，需要对其做一定的改造： #### **1. 修改子项目的打包配置** 假设子项目基于 Vite 构建，则需要调整其 `vite.config.js` 文件： ```javascript export default { base: '/', // 设置相对路径 build: { rollupOptions: { output: { manualChunks: undefined, }, }, }, }; ``` 确保生成的静态资源能够在指定路径下访问。 #### **2. 提供生命钩子** 子项目需要向外提供必要的生命周期方法（`bootstrap`, `mount`, 和 `unmount`）。这通常是在 `src/qiankun life cycle.ts` 中实现： ```typescript import { createApp } from 'vue'; import App from './App.vue'; let instance: any; export async function bootstrap() {} export async function mount(props: any) { const { container } = props; instance = createApp(App).mount(container ? container.querySelector('#app') : '#app'); } export async function unmount() { if (instance && typeof instance.unmount === 'function') { instance.unmount(); instance = null; } } ``` #### **3. 导出模块化规范** 在子项目的根目录下的 `public/global.d.ts` 添加声明文件，以便 TypeScript 正确识别： ```typescript declare module '*.vue' { export default any; } ``` --- ### **四、运行验证** 启动主项目和子项目后，在浏览器中打开 `http://localhost:3000/#/train/plan`，应该能看到子项目的内容正确渲染到 `#child-app` 容器内。 如果遇到跨域问题，可以尝试在主项目中增加代理配置（如通过 Vite 的 `proxy` 参数），或将两个服务部署在同一域名下。 --- ### §**相关问题§**: 1. 如果子应用无法加载，可能是哪些原因导致的？ 2. 如何在主应用中监听子应用的状态变化（如加载完成或销毁）？ 3. 是否可以在 qiankun 中实现多个子应用间的通信？如果有，应该如何设计数据共享机制？