[发明专利]基于vue的系统架构改造获得微前端系统架构的方法及系统

权利要求书

1.将基于vue的系统架构改造成微前端架构的方法，其特征在于，包括：

将基于vue的系统作为主应用；

编写子应用的源码，在子应用程序接口中抛出菜单对应组件的引用；

编写子应用的打包配置文件，将所述源码中特殊标识的引用指向主应用中window对象上已挂载的公共组件或公共方法；将所述源码中对vue框架的引用指向主应用中window对象上挂载的vue框架引用；编写子应用的配置文件，配置文件包括目标文件路径；根据子应用的配置文件和打包配置文件打包获得子应用的目标文件；

注册菜单，确定菜单所属的子应用；配置菜单管理信息，以使得在代码执行阶段，主应用根据菜单管理信息中的配置信息，加载菜单对应子应用的配置文件，根据配置文件加载子应用的目标文件并执行。

2.如权利要求1所述的将基于vue的系统架构改造成微前端架构的方法，其特征在于，配置文件中还包括子应用的依赖信息，配置依赖的方法为：配置依赖子应用的标识；若依赖子应用不依赖其它子应用，则配置依赖子应用的目标文件路径，若依赖子应用已在其配置文件中配置其自身依赖，则配置依赖子应用的配置文件路径，以使得子应用根据依赖子应用的标识，以及依赖子应用的目标文件路径或配置文件路径，加载被依赖子应用。

3.如权利要求1所述的将基于vue的系统架构改造成微前端架构的方法，其特征在于，在代码执行阶段，主应用根据菜单管理信息中的配置信息，加载菜单对应子应用的配置文件，根据配置文件加载子应用的目标文件并执行，包括：

用户访问某菜单，根据菜单管理信息加载菜单对应子应用的配置文件；

主应用根据子应用的配置文件加载子应用目标文件；

根据菜单管理信息中配置信息，获取菜单对应组件的名称，获取子应用程序接口中抛出的对应名称组件引用，在主应用中渲染该组件，完成业务功能。

4.如权利要求1所述的将基于vue的系统架构改造成微前端架构的方法，其特征在于，在代码执行阶段，主应用根据菜单管理信息中的配置信息，加载菜单对应子应用的配置文件，根据配置文件加载子应用的目标文件并执行，包括：

用户访问某菜单，根据菜单管理信息加载子应用的配置文件；

根据配置文件确定子应用是否依赖其他子应用；如果依赖其他子应用，加载被依赖子应用，将被依赖子应用程序接口抛出的组件与方法，挂载在window对象与子应用唯一标识一一对应的属性上，以便子应用中通过特殊标识使用依赖的其他子应用程序接口抛出的方法和组件；

主应用根据子应用的配置文件加载子应用的目标文件；

根据菜单管理信息中配置信息，获取菜单对应组件的名称，获取子应用程序接口中抛出的对应名称组件引用，在主应用中渲染该组件，完成业务功能。

5.如权利要求1所述的将基于vue的系统架构改造成微前端架构的方法，其特征在于，所述方法还包括：将新的公共组件或者公共方法开发为一个公共库子应用；所述公共库子应用程序接口抛出公共组件或公共方法的引用；

在其他子应用需要使用新的公共组件或公共方法时，需在本子应用中配置对该公共库子应用的依赖。

6.如权利要求1所述的将基于vue的系统架构改造成微前端架构的方法，其特征在于，使用脚手架快速生成子应用基础源码，包括子应用的配置文件、子应用的打包配置文件、子应用的源码和主应用部署包；子应用调试时运行主应用部署包，创建待调试子应用菜单，并调试子应用源码。