【技术实现步骤摘要】
本专利技术涉及计算机web微前端，具体涉及一种基于microapp的微前端应用构建方法、装置、电子设备及存储介质。
技术介绍
1、微前端的概念是由thoughtworks在2016年提出的，它借鉴了微服务的架构理念，核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用融合为一个完整的应用，或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。
2、它主要解决了两个问题：
3、1)随着项目迭代应用越来越庞大，难以维护。
4、2)跨团队或跨部门协作开发项目导致效率低下的问题。
5、在micro-app之前，业内已经有一些开源的微前端框架，比较流行的有2个：single-spa和qiankun。
6、single-spa是通过监听url change事件，在路由变化时匹配到渲染的子应用并进行渲染，这个思路也是目前实现微前端的主流方式。同时single-spa要求子应用修改渲染逻辑并暴露出三个方法：bootstrap、mount、unmount，分别对应初始化、渲染和卸载，这也导致子应用需要对入口文件进行修改。因为qiankun是基于single-spa进行封装，所以这些特点也被qiankun继承下来，并且需要对webpack配置进行一些修改。
7、micro-app
8、搭建vue应用微前端基座时，尤其是管理系统时，需要考虑解决以下一些问题：主应用切换菜单时，子应用如何实现页面切换；主应用和子应用如何进行统一的身份认证；主应用切换页签时，子应用页面状态如何保持；主应用切换ui主题时，子应用如何切换；以及多个主应用对多个子应用时，如何以较小的成本实现灵活接入。
技术实现思路
1、本专利技术的目的在于，提供一种微前端应用构建方法、装置、电子设备及存储介质，解决主应用和子应用之间的管理问题。
2、本专利技术所采用的技术方案如下：
3、一种基于microapp的微前端应用构建方法，包括以下步骤：
4、定义至少一个主应用，包括主应用a，应用代号记为a；每个主应用新建至少一个子应用入口页面；
5、定义至少一个子应用，包括子应用b，应用代号记为b；
6、将任意一个子应用b通过任意一个主应用a新建的一个子应用入口页面接入到目标主应用a中。
7、进一步的，主应用a定义如下：
8、s110、应用基于vue3和vite，路由采用vue-router的hash模式；
9、s120、应用使用keep-alive组件加载嵌套路由；
10、s130、应用安装库@micro-zoe/micro-app；
11、s140、应用身份认证数据token存放在localstorage中，localstorage的key使用应用代号作为前缀，为a-token；
12、s150、应用ui主题数据theme存放在localstorage中，localstorage的key使用应用代号作为前缀，为a-theme；
13、s160、应用按页面的文件系统路径生成路由并注册；
14、s170、新建至少一个子应用入口页面；
15、s180、将步骤s170中的页面注册成path为/micro-待接入子应用name的嵌套路由；
16、s190、在main.ts中注册启动micro-app。
17、进一步的，新建子应用入口页面包括：
18、s171、设置待接入子应用name，设置待接入子应用url为待接入子应用b的运行地址；
19、s172、禁用虚拟路由；
20、s173、开启iframe沙箱；
21、s174、开启keep-alive；
22、s175、向待接入子应用b发送目标主应用代号a；
23、s176、监听目标主应用路由变化，当路由path符合micro-待接入子应用name时，向待接入子应用b发送路由切换事件。
24、进一步的，子应用b定义如下：
25、s210、应用基于vue3和vite，路由采用vue-router的hash模式；
26、s220、新建空router-view页面as-sub.vue；
27、s230、应用判断是否处于微前端环境，若处于微前端环境，则localstorage的key使用步骤s175中的目标主应用代号a作为前缀，子应用读取到目标主应用的token数据a-token，从而通过身份认证，读取到目标主应用的主题数据a-theme，从而跟随目标主应用切换主题；
28、s240、应用判断是否处于微前端环境，若处于微前端环境，获取步骤s171中设置的待接入子应用name，应用按页面的文件系统路径生成路由，并将每个路由增加micro-待接入子应用name作为前缀，然后注册为步骤s220的嵌套路由；
29、s250、应用绑定监听函数，接收目标主应用发送数据，当接收到路由切换事件时，执行路由切换动作。
30、一种基于microapp的微前端应用构建装置，包括：
31、主应用定义模块，用于定义至少一个主应用，包括主应用a，应用代号记为a；每个主应用新建至少一个子应用入口页面；
32、子应用定义模块，用于定义至少一个子应用，包括子应用b，应用代号记为b；
33、应用接入模块，用于将任意一个子应用b通过任意一个主应用a新建的一个子应用入口页面接入到目标主应用a中。
34、进一步的，主应用a定义如下：
35、s110、应用基于vue3和vite，路由采用vue-router的hash模式；
36、s120、应用使用keep-alive组件加载嵌套路由；
37、s130、应用安装库@micro-zoe/micro-app；
38、s140、应用身份认证数据token存放在localstorage中，localstorage的key使用应用代号作为前缀，为a-token；
39、s150、应用ui主题数据theme存放在localstorage中，loca本文档来自技高网...
【技术保护点】
1.一种基于microApp的微前端应用构建方法，其特征在于，包括以下步骤：
2.根据权利要求1所述的基于microApp的微前端应用构建方法，其特征在于，主应用A定义如下：
3.根据权利要求2所述的基于microApp的微前端应用构建方法，其特征在于，新建子应用入口页面包括：
4.根据权利要求3所述的基于microApp的微前端应用构建方法，其特征在于，子应用B定义如下：
5.一种基于microApp的微前端应用构建装置，其特征在于，包括：
6.根据权利要求5所述的基于microApp的微前端应用构建装置，其特征在于，主应用A定义如下：
7.根据权利要求6所述的基于microApp的微前端应用构建装置，其特征在于，新建子应用入口页面包括：
8.根据权利要求7所述的基于microApp的微前端应用构建装置，其特征在于，子应用B定义如下：
9.一种电子设备，其特征在于，包括：
10.一种计算机可读存储介质，其特征在于，存储有计算机程序，用于被处理器执行时，实现权利要求1至4中
...【技术特征摘要】
1.一种基于microapp的微前端应用构建方法，其特征在于，包括以下步骤：
2.根据权利要求1所述的基于microapp的微前端应用构建方法，其特征在于，主应用a定义如下：
3.根据权利要求2所述的基于microapp的微前端应用构建方法，其特征在于，新建子应用入口页面包括：
4.根据权利要求3所述的基于microapp的微前端应用构建方法，其特征在于，子应用b定义如下：
5.一种基于microapp的微前端应用构建装置，其特征在于，包括：
6.根据权利要求5...
【专利技术属性】
技术研发人员：涂鹏飞，林萍，冯莉，李婷，佘厚毓，
申请(专利权)人：中冶南方工程技术有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。