首页@umijs/plugin-qiankun主应用如何配置

@umijs/plugin-qiankun主应用如何配置

时间: 2023-12-29 16:03:04 浏览: 272

@umijs/plugin-qiankun 是一个用于在主应用中集成微前端应用的插件。要在主应用中使用该插件，需要进行以下配置： 1. 安装插件： ```bash npm install @umijs/plugin-qiankun --save ``` 2. 在.umirc.ts 或 config/config.ts 中进行配置： ```typescript export default { qiankun: { // 注册子应用信息 apps: [ { name: 'app1', // 子应用名称 entry: '//localhost:8001', // 子应用入口 URL base: '/app1', // 子应用的基础路径 mountElementId: 'app1', // 子应用挂载的 DOM 节点 ID }, { name: 'app2', entry: '//localhost:8002', base: '/app2', mountElementId: 'app2', }, ], // 预加载子应用 prefetch: true, // 是否开启沙箱 sandbox: true, }, }; ``` 其中，`apps` 为子应用列表，每个子应用包含以下属性： - `name`：子应用名称，唯一标识符。 - `entry`：子应用入口 URL。 - `base`：子应用的基础路径。 - `mountElementId`：子应用挂载的 DOM 节点 ID。 `prefetch` 表示是否预加载子应用，`sandbox` 表示是否开启沙箱模式。 3. 在主应用的页面中使用 `qiankun` 组件进行渲染： ```typescript import React from 'react'; import { MicroApp, render } from 'umi'; export default function() { return ( <div> <MicroApp name="app1" /> <MicroApp name="app2" /> </div> ); } ``` 以上就是 @umijs/plugin-qiankun 在主应用中的配置过程。

阅读全文