关于umi接入qiankun插件尝试

umi自带插件是可以一键开启接入qiankun的微前端模式。

部分代码

基座配置：

import { defineConfig } from 'umi';
import routes from "./routes";

export default defineConfig({
  qiankun: {
    master: {
      // 注册子应用信息
      apps: [
        {
          name: 'child', // 唯一 id
          entry: '//localhost:8088', // html entry
          // props: {
          //   isQianKun: true
          // }
        },
      ],
      sandbox: true,
    }
  },  
  routes,
  fastRefresh: {},
  mfsu: {},
  layout: {
    title: "基座",
    // headerTheme: 'dark',
    navTheme: "dark",
    siderWidth: 180,
    waterMarkProps: {
      content: 'geeba-demo',
      gapX: 140,
      gapY: 120,
      fontSize: 14,
    },
    // "navTheme": "realDark",
    "primaryColor": "#52C41A",
    "layout": "top",
    "contentWidth": "Fluid",
    // "fixedHeader": true,
    "fixSiderbar": false,
    "pwa": false,
    "logo": "http://goduer.com/favicon.ico",
    "headerHeight": 48,
    "splitMenus": false,
    "footerRender": false
  },
});

基座路由：

  {
    path: '/',
    name: "demo",
    icon: 'QuestionCircleOutlined',
    component: '@/pages/index'
  },
  {
    path: '/child',
    microApp: 'child',
    // hideInMenu: true,
    menu: {
      name: '子应用',
      icon: 'dashboard',
    },
  }
]

子应用配置：

import routes from "./routes";

export default defineConfig({
  routes,
  fastRefresh: {},
  mfsu: {},
  layout: {
    title: "子应用",
    navTheme: "light",
    // navTheme: "dark",
    primaryColor: "#1890ff",
    logo: 'http://goduer.com/favicon.ico',
    headerHeight: 48,
    contentWidth: 'Fluid',
    splitMenus: false,
		footerRender: false,
    menuHeaderRender: false,
    fixedHeader: true,
    fixSiderbar: false,
    siderWidth: 180,
    waterMarkProps: {
      content: 'geeba-demo',
      gapX: 140,
      gapY: 120,
      fontSize: 14,
    },
    pwa: false,
    "contentStyle": {
      height: "calc(100vh - 48px)"
    }
  },
  devServer: {
    port: 8088
  },
  qiankun: {
    slave: {},
  },
});

子应用app.tsx:

import { Avatar } from 'antd'

export const layout = (): BasicLayoutProps => {
	//@ts-ignore
	if (window?.__POWERED_BY_QIANKUN__) {
		return {
			layout: 'side',
			headerRender: false,
			rightContentRender: () => (
				<>
					<Avatar
						// size='small'
						style={{ marginRight: '16px' }}
						size={24}
						src='https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'
						alt='avatar'
					/>
				</>
			),
		}
	} else {
		return {
			layout: 'mix',
			rightContentRender: () => (
				<>
					<Avatar
						// size='small'
						style={{ marginRight: '16px' }}
						size={24}
						src='https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'
						alt='avatar'
					/>
				</>
			),
		}
	}
}

export const qiankun = {
	// 应用加载之前
	async bootstrap(props: any) {
		console.log('app1 bootstrap', props)
		return props
	},
	// 应用 render 之前触发
	async mount(props: any) {
		console.log('app1 mount', props)
	},
	// 应用卸载之后触发
	async unmount(props: any) {
		console.log('app1 unmount', props)
	},
}

Features

• ✔︎ 基于 qiankun
• ✔︎ 支持主应用和子应用都用 umi
• ✔︎ 支持通过 <MicroApp /> 组件引入子应用
• ✔︎ 父子应用通讯
• ✔︎ 子应用运行时配置自定义 bootstrap()、mount() 和 unmount()
• ✔︎ 主应用、子应用联调
• ✔︎ 嵌套子应用

相关链接

参考文档：https://v3.umijs.org/zh-CN/plugins/plugin-qiankun