umi-plugin-qiankun

<think>好的，我现在需要帮助用户了解如何使用 umi-plugin-qiankun 插件。首先，我得回忆一下这个插件的基本信息。根据提供的引用内容，这个插件是用于Umi.js框架的微前端解决方案，基于Qiankun实现，帮助拆分子应用并协同运行。用户可能想知道如何配置主应用和子应用，以及部署时需要注意的问题。 首先，我应该分步骤说明主应用和子应用的配置。主应用需要安装插件并注册子应用，而子应用则需要导出生命周期钩子。引用[1]提到版本一致性很重要，必须确保主应用和子应用使用相同版本的插件，否则会报错。这一点需要特别强调，避免用户遇到兼容性问题。 然后，部署方面，引用[3]指出子应用需要配置publicPath为二级目录，比如/rescue/，这样资源路径才能正确加载。同时，跨域问题也需要处理，子应用可能需要设置Access-Control-Allow-Origin头信息。这部分需要详细说明，因为部署错误是常见的问题来源。 接下来，示例代码部分，用户可能需要看到具体的配置代码。比如主应用的config/config.ts中添加qiankun配置，注册子应用；子应用的app.tsx导出生命周期函数。同时，引用[3]中的publicPath配置示例能帮助用户理解如何调整打包路径。 用户可能还会关心如何启动应用，所以需要给出启动命令，比如分别启动主应用和子应用，并通过主应用的入口访问子应用。这有助于用户测试整个微前端架构是否正常工作。 最后，相关问题的部分需要考虑用户可能进一步的问题，比如版本冲突的解决、部署路径问题、通信机制等。这些问题应该引导用户深入理解插件的使用和潜在挑战，引用中的信息可以作为支持，比如版本一致性来自引用[1]，部署配置来自引用[3]。 总结来说，我需要按照配置主应用、子应用、部署注意事项、示例代码的结构组织回答，确保每一步都清晰，并引用相关的参考资料来增强可信度。同时，预测用户可能遇到的问题，提前在回答中给出解决方案或提示，帮助他们顺利使用umi-plugin-qiankun。</think>### 如何使用 @umijs/umi-plugin-qiankun？ #### 1. **主应用配置** - **安装插件**：在主应用的 Umi 项目中安装插件： ```bash npm install @umijs/umi-plugin-qiankun --save ``` - **注册子应用**：在 `config/config.ts` 中添加配置： ```typescript export default { qiankun: { master: { apps: [ { name: 'subApp', entry: '//localhost:8001', // 子应用入口地址（开发环境） }, ], }, }, }; ``` 注意：主应用和子应用需使用**相同插件版本**，否则可能因依赖冲突报错[^1]。 #### 2. **子应用配置** - **导出生命周期钩子**：在子应用的 `app.tsx` 中添加： ```typescript export const qiankun = { async bootstrap() { /* 初始化逻辑 */ }, async mount(props) { /* 挂载逻辑 */ }, async unmount(props) { /* 卸载逻辑 */ }, }; ``` - **调整路由**：若子应用需独立运行，需兼容两种模式（微应用/独立应用）。 #### 3. **部署注意事项** - **路径配置**：子应用打包时需设置 `publicPath` 为二级目录（如 `/rescue/`），确保资源加载正确[^3]： ```typescript // app.tsx export const qiankun = { // 配置打包路径 publicPath: '/rescue/', }; ``` - **跨域处理**：生产环境需配置子应用服务器的 `Access-Control-Allow-Origin` 头信息。 #### 4. **示例代码** 主应用入口触发子应用加载： ```typescript // 主应用路由配置 routes: [ { path: '/subapp', microApp: 'subApp' }, ] ``` 子应用入口适配： ```typescript // 子应用 app.tsx export function render(oldRender) { oldRender(); } ``` #### 5. **运行与调试** - 分别启动主应用（默认端口 `8000`）和子应用（如 `8001`）。 - 访问 `http://localhost:8000/subapp` 查看子应用是否正常加载。 ###