"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[172],{8504:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-b15becb0",path:"/reference/plugin/plugins/qiankun.html",title:"@fesjs/plugin-qiankun",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"主应用配置",slug:"主应用配置",children:[{level:3,title:"第一步：注册子应用",slug:"第一步-注册子应用",children:[]},{level:3,title:"第二步：装载子应用",slug:"第二步-装载子应用",children:[]}]},{level:2,title:"子应用配置",slug:"子应用配置",children:[{level:3,title:"第一步：插件注册",slug:"第一步-插件注册",children:[]},{level:3,title:"第二步：配置运行时生命周期钩子（可选）",slug:"第二步-配置运行时生命周期钩子-可选",children:[]}]},{level:2,title:"父子应用通讯",slug:"父子应用通讯",children:[{level:3,title:"配合 useModel 使用",slug:"配合-usemodel-使用",children:[]},{level:3,title:"基于 props 传递",slug:"基于-props-传递",children:[]},{level:3,title:"MicroApp",slug:"microapp",children:[]},{level:3,title:"MicroAppWithMemoHistory",slug:"microappwithmemohistory",children:[]}]}],filePathRelative:"reference/plugin/plugins/qiankun.md",git:{updatedTime:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},5574:(n,s,a)=>{a.r(s),a.d(s,{default:()=>k});var p=a(6252);const t=(0,p._)("h1",{id:"fesjs-plugin-qiankun",tabindex:"-1"},[(0,p._)("a",{class:"header-anchor",href:"#fesjs-plugin-qiankun","aria-hidden":"true"},"#"),(0,p.Uk)(" @fesjs/plugin-qiankun")],-1),e={href:"https://qiankun.umijs.org/",target:"_blank",rel:"noopener noreferrer"},o={href:"https://umijs.org/zh-CN/plugins/plugin-qiankun#MicroApp",target:"_blank",rel:"noopener noreferrer"},c=(0,p.uE)('

启用方式

在 package.json 中引入依赖：

{\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-qiankun": "^2.0.0"\n    },\n}\n
1
2
3
4
5
6

介绍

有一种痛叫接手老项目，技术栈老旧，内容多，还要继续维护~

可能目前迁移、升级老项目最好的解决方案就是微前端。plugin-qiankun 是基于 qiankun 实现的 Fes.js 微前端解决方案。

主应用配置

第一步：注册子应用

export default {\n    qiankun: {\n        main: {\n            // 注册子应用信息\n            apps: [\n                {\n                    name: 'app1', // 唯一 id\n                    entry: '//localhost:8001', // html entry\n                    props: {}  // 传递给子应用的数据\n                },\n                {\n                    name: 'app2', // 唯一 id\n                    entry: '//localhost:8002', // html entry\n                },\n            ],\n        },\n    },\n};\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

第二步：装载子应用

使用路由绑定的方式

注意

主应用和子应用需要自行适配路由路径！！！待完善...

假设我们的系统之前有这样的一些路由：

export default {\n    router: {\n        routes: [{\n            "path": "/",\n            "component": () => import('@/src/.fes/plugin-layout/index.js'),\n            "children": [\n                {\n                    "path": "/onepiece",\n                    "component": () => import('@/pages/onepiece'),\n                    "name": "onepiece",\n                    "meta": {\n                        "name": "onepiece",\n                        "title": "onepiece"\n                    }\n                }\n            ]\n        }]\n    }\n}\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

我们现在想在 /son 加载子应用 app1，只需要增加这样一些配置即可：

export default {\n    router: {\n        routes: [{\n            "path": "/",\n            "component": () => import('@/src/.fes/plugin-layout/index.js'),\n            "children": [\n                {\n                    "path": "/onepiece",\n                    "component": () => import('@/pages/onepiece'),\n                    "name": "onepiece",\n                    "meta": {\n                        "name": "onepiece",\n                        "title": "onepiece"\n                    }\n                },\n                {\n                    "path": "/son",\n                    "meta": {\n                        "name": "son",\n                        "title": "子应用",\n                        "microApp": "app1"\n                    }\n                }\n            ]\n        }]\n    }\n}\n















 
 
 
 
 
 
 
 




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

当前我们依然提倡约定路由的方式，在src/pages 目录新建 son.vue：

<config>\n{\n    "name": "son",\n    "title": "子应用",\n    "microApp": "app1"\n}\n</config>\n
1
2
3
4
5
6
7

使用 <MicroApp /> 组件的方式

提示

建议使用这种方式来引入不带路由的子应用。 否则请自行关注子应用依赖的路由跟当前浏览器 url 是否能正确匹配上，否则很容易出现子应用加载了，但是页面没有渲染出来的情况。

<template>\n    <MicroApp :name="name" />\n</template>\n<script>\nimport { MicroApp } from '@fesjs/fes';\n\nexport default {\n    components: { MicroApp },\n    setup(){\n        const name = "app1"\n        return {\n            name\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

使用 <MicroAppWithMemoHistory /> 组件的方式

如果我们的路由使用 history 模式，那么在使用乾坤时还算方便，主应用和子应用的路由根据base可以很方便的匹配起来，而且不存在冲突。但是当我们使用 hash 模式时，就问题很大，主应用和子应用的路由必须一样才可以匹配上，用起来贼不方便。而且不能在一个页面上同时加载多个子应用，路由存在冲突！这时候，<MicroAppWithMemoHistory /> 出现了，完美解决上面的问题。

<MicroAppWithMemoHistory /> 相比 <MicroApp /> ，需要多传入 url 参数，用于指定加载子应用什么路由页面。

<template>\n   <MicroApp :name="name" url="/" />\n</template>\n<script>\nimport { MicroApp } from '@fesjs/fes';\n\nexport default {\n   components: { MicroApp },\n   setup(){\n       const name = "app1"\n       return {\n           name\n       }\n   }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

子应用配置

第一步：插件注册

export default {\n    qiankun: {\n        micro: {},\n    }\n};\n
1
2
3
4
5

第二步：配置运行时生命周期钩子（可选）

插件会自动为你创建好 qiankun 子应用需要的生命周期钩子，但是如果你想在生命周期期间加一些自定义逻辑，可以在子应用的 src/app.js 里导出 qiankun 对象，并实现每一个生命周期钩子，其中钩子函数的入参 props 由主应用自动注入。

export const qiankun = {\n    // 应用加载之前\n    async bootstrap(props) {\n        console.log('app1 bootstrap', props);\n    },\n    // 应用 render 之前触发\n    async mount(props) {\n        console.log('app1 mount', props);\n    },\n    // 当 props 更新时触发\n    async update(props){\n        console.log('app1 update', props);\n    },\n    // 应用卸载之后触发\n    async unmount(props) {\n        console.log('app1 unmount', props);\n    },\n};\n\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

父子应用通讯

有两种方式实现

',33),l={id:"配合-usemodel-使用",tabindex:"-1"},r=(0,p._)("a",{class:"header-anchor",href:"#配合-usemodel-使用","aria-hidden":"true"},"#",-1),u=(0,p.uE)('

确保已经安装了 @fesjs/plugin-model：

{\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-model": "^2.0.0"\n    },\n}\n
1
2
3
4
5
6

主应用传递 props

<template>\n    <MicroApp :name="name" :user="user" />\n</template>\n<script>\nimport { MicroApp } from '@fesjs/fes';\n\nexport default {\n    components: { MicroApp },\n    setup(){\n        const name = "app1"\n        const user = ref("")\n        return {\n            name,\n            user\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { reactive } from 'vue';\n\nexport default () => {\n    const state = reactive({ c: 1 });\n    return {\n        state\n    };\n};\n
1
2
3
4
5
6
7
8

子应用消费 props

子应用中会自动生成一个全局名为 qiankunStateFromMain 的 model， 可以在任意组件中获取主应用透传的 props 的值。

<script>\nexport default {\n    setup(){\n        const mainState = useModel('qiankunStateFromMain');\n        return {\n            mainState\n        };\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10

基于 props 传递

MicroApp

属性说明类型默认值
name子应用名称，传入qiankun.main.apps配置中的nameString-
settings子应用配置信息Object{}
props传入子应用的参数Object{}
lifeCycles子应用生命周期钩子Object{}
cacheName子应用缓存名称，配置后根据name+cacheName缓存子应用实例Object-

MicroAppWithMemoHistory

属性说明类型默认值
name子应用名称，传入qiankun.main.apps配置中的nameString-
settings子应用配置信息Object{}
props传入子应用的参数Object{}
lifeCycles子应用生命周期钩子Object{}
cacheName子应用缓存名称，配置后根据name+cacheName缓存子应用实例Object-
url子应用的路由地址String-
',16),i={},k=(0,a(3744).Z)(i,[["render",function(n,s){const a=(0,p.up)("OutboundLink"),i=(0,p.up)("RouterLink");return(0,p.wg)(),(0,p.iD)(p.HY,null,[t,(0,p._)("p",null,[(0,p.Uk)("Fes.js plugin for "),(0,p._)("a",e,[(0,p.Uk)("qiankun"),(0,p.Wm)(a)]),(0,p.Uk)("，参考"),(0,p._)("a",o,[(0,p.Uk)("@umijs/plugin-qiankun"),(0,p.Wm)(a)]),(0,p.Uk)(" 实现，喜欢 React 的同学推荐直接用 Umi。")]),c,(0,p._)("h3",l,[r,(0,p.Uk)(" 配合 "),(0,p.Wm)(i,{to:"/reference/plugin/plugins/model.html"},{default:(0,p.w5)((()=>[(0,p.Uk)("useModel")])),_:1}),(0,p.Uk)(" 使用")]),u],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]);