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

说明书

本发明公开了基于vue的系统架构改造获得微前端系统架构的方法及系统，将基于vue的管理系统作为主应用；编写子应用的源码，在子应用程序接口中抛出菜单对应组件引用；编写打包配置文件，将子应用的源码中特殊标识的引用指向主应用中window对象上已挂载的公共组件或方法；将子应用的源码中对vue框架的引用指向主应用中window对象上挂载的vue框架引用；根据配置文件和打包配置文件打包获得目标文件；注册菜单，确定菜单所属的子应用；配置菜单管理信息，以使得在代码执行阶段，主应用加载子应用的目标文件并执行。本发明将部分菜单的业务功能源码独立开发、独立打包、独立部署形成子应用。

技术领域

本发明涉及前端开发技术领域，具体涉及将基于vue的管理系统架构改造成微前端架构的方法。

背景技术

现有项目是基于vue的后台管理类系统，采用vue前端开发框架，该系统中，每个菜单会绑定一个vue组件。当用户访问菜单时，将对应vue组件渲染到菜单容器中。

前端项目中只有一个html文件，所有功能均通过javascript脚本实现的前端项目称为单页应用。每个html中均有一个window对象是浏览器内置全局对象，window对象上的属性是该html文件中加载的所有javascript脚本均可以访问的。

基于vue的后台管理类系统是一个单页应用，主应用在window上挂载方法，子应用中可以访问。现有项目在做业务功能开发时，会用到公共组件和公共方法，公共组件和公共方法是对复用率高的代码的抽象，在业务功能需要的时候可直接调用，不必再重复开发。公共组件和公共方法统称为公共代码。该系统项目业务功能以菜单的形式在系统中呈现，开发人员通过在菜单管理功能模块，创建新的菜单，并配置对应功能源码相对路径，完成菜单与业务功能代码的绑定。现有项目前端开发方法是一种单体方法，单体方法项目中所有源码均在同一个开发目录中。经过同一个打包工具打包生成部署文件，随着菜单数的增多，代码量增加，打包过程变得过长甚至崩溃。同时多开发人员合作完成系统开发时，需要进行代码合并，增加调试的时间。

微前端是一种类似于微服务的前端代码组织方法，将前端代码分成主应用与子应用，主应用作为项目入口，负责子应用的激活与销毁，子应用独立开发，独立打包，独立部署。

把现有项目改造成微前端后，如果将公共代码复制到每一个子应用的开发目录下，当公共代码修改时，需要到每个子应用下进行修改，不利于代码复用。

因此如何实现将基于vue的系统架构改造成微前端架构的方法，是目前需要解决的技术问题。

发明内容

本发明旨在针对基于vue的系统，提供一种方法实现将其系统架构改造成微前端架构。

为实现上述技术目的，本发明采用以下技术方案。

第一方面，本发明提供了将基于vue的系统架构改造成微前端架构的方法，包括：

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

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

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

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