[发明专利]基于qiankun在Vue CLI应用构建微前端基座的方法

说明书

本发明公开了一种基于qiankun在Vue CLI应用构建微前端基座的方法，包括：步骤S110，Vue CLI创建主应用、子应用；步骤S120，主应用和子应用分别安装自定义插件，安装插件时提供选项安装类型是主应用还是子应用，若为子应用则需要输入子应用对应的端口号；步骤S130，检查并修改主应用关于子应用配置信息，由于主应用添加插件后，会重写主应用中App.vue的代码，需要检查data中apps变量关于子应用配置信息的正确性；步骤S140，启动所有应用完成微前端基座搭建。通过插件的特性并结合qiankun微前端框架可快速对批量应用进行微前端基座的搭建。

技术领域

本发明涉及计算机及数据处理技术领域，尤其是涉及一种基于qiankun在Vue CLI应用构建微前端基座的方法。

背景技术

微前端是一种多个团队通过独立发布功能的方式来共同构建Web应用的技术手段及方法策略。它旨在解决单体应用在一个相对长的时间跨度下，由于参与的人、团队增多、变迁，从一个普通应用演变成一个“巨石应用”后，随之带来的应用难维护的问题。不少产品构建前端应用所选择的架构方案，特别是多个应用需要融合在一个应用时，不局限于各个子应用的技术栈，用户可以无感知在主应用中对不同的子应用进行切换。

同时微前端有如下特点：

1、与技术栈无关：框架不限制介入应用的技术栈，微前端具备完全的主动权；

2、微前端包含的应用可独立开发、部署：所有应用代码仓库独立，部署完成后框架可自行完成同步更新；

3、增量升级：复杂场景中很难对一个系统做全量的技术栈升级或者重构，通过微前端这一技术手段可以进行渐进式的升级；

4、独立运行时：微前端中每个应用间JS、CSS均会隔离，运行时状态不共享，避免污染；

目前在微前端领域主要方案有以下几种：

1、通过Nginx路由转发：其主要手段是基于Nginx提供的反向代理能力，通过配置不同的路径映射不同的应用，但是这一手段在应用切换时会刷新浏览器降低用户体验；

2、iframe应用嵌套：主应用是单独页面，子应用均使用iframe进行嵌套，由于其自带沙箱可以使得应用间状态、样式不共享，不会出现污染的问题，同时应用间可以使用postMessage或contentWindow的方式进行通讯。但是通过iframe的样式和兼容性使得该手段在微前端应用具有一定的局限性；

3、Web Components：每个应用需要通过Web Components技术编写组件，可以单独部署的同时每个应用间也拥有独立的CSS和JS。但是当面对老项目时，改造成本过高，通信复杂的问题也会随之涌现；

4、组合式应用路由分发：每个应用独立构建部署，主应用通过父应用进行路由管理，子应用的相互隔离、无感知切换是该手段的优势，但是子应用之间样式冲突、变量污染、通信复杂的缺点也随之出现；

不过，通过第三方库qiankun就可以解决巨石应用拆解成若干可以自治的松耦合应用，它支持任意JS框架均可以使用，同时具备微前端需要的基本能力，例如样式隔离、JS沙箱、预加载、应用间通讯等，经过足量的线上系统打磨，稳定性也相对较高。搭建Vue应用微前端基座时，不同类型的应用需要不同配置，并且相同类型的应用需要重复配置。因此，如何解决重复配置和快速实现微前端基座是搭建Vue微前端基座必须要解决的技术问题。

基于以上研究，本发明以插件的形式通过qiankun实现快速在Vue CLI应用构建微前端基座。

发明内容