基于vue的系统架构改造获得微前端系统架构的方法及系统技术方案

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

【技术实现步骤摘要】
基于vue的系统架构改造获得微前端系统架构的方法及系统


[0001]本专利技术涉及前端开发
，具体涉及将基于vue的管理系统架构改造成微前端架构的方法。

技术介绍

[0002]现有项目是基于vue的后台管理类系统，采用vue前端开发框架，该系统中，每个菜单会绑定一个vue组件。当用户访问菜单时，将对应vue组件渲染到菜单容器中。
[0003]前端项目中只有一个html文件，所有功能均通过javascript脚本实现的前端项目称为单页应用。每个html中均有一个window对象是浏览器内置全局对象，window对象上的属性是该html文件中加载的所有javascript脚本均可以访问的。
[0004]基于vue的后台管理类系统是一个单页应用，主应用在window上挂载方法，子应用中可以访问。现有项目在做业务功能开发时，会用到公共组件和公共方法，公共组件和公共方法是对复用率高的代码的抽象，在业务功能需要的时候可直接调用，不必再重复开发。公共组件和公共方法统称为公共代码。该系统项目业务功能以菜单的形式在系统中呈现，开发人员通过在菜单管理功能模块，创建新的菜单，并配置对应功能源码相对路径，完成菜单与业务功能代码的绑定。现有项目前端开发方法是一种单体方法，单体方法项目中所有源码均在同一个开发目录中。经过同一个打包工具打包生成部署文件，随着菜单数的增多，代码量增加，打包过程变得过长甚至崩溃。同时多开发人员合作完成系统开发时，需要进行代码合并，增加调试的时间。
[0005]微前端是一种类似于微服务的前端代码组织方法，将前端代码分成主应用与子应用，主应用作为项目入口，负责子应用的激活与销毁，子应用独立开发，独立打包，独立部署。
[0006]把现有项目改造成微前端后，如果将公共代码复制到每一个子应用的开发目录下，当公共代码修改时，需要到每个子应用下进行修改，不利于代码复用。
[0007]因此如何实现将基于vue的系统架构改造成微前端架构的方法，是目前需要解决的技术问题。

技术实现思路

[0008]本专利技术旨在针对基于vue的系统，提供一种方法实现将其系统架构改造成微前端架构。
[0009]为实现上述技术目的，本专利技术采用以下技术方案。
[0010]第一方面，本专利技术提供了将基于vue的系统架构改造成微前端架构的方法，包括：将基于vue的系统作为主应用；编写子应用的源码，在子应用程序接口中抛出菜单对应组件的引用；编写子应用的打包配置文件，将所述源码中特殊标识的引用指向主应用中window对象上已挂载的公共组件或公共方法；将所述源码中对vue框架的引用指向主应用中
window对象上挂载的vue框架引用；编写子应用的配置文件，配置文件包括目标文件路径；根据子应用的配置文件和打包配置文件打包获得子应用的目标文件；注册菜单，确定菜单所属的子应用；配置菜单管理信息，以使得在代码执行阶段，主应用根据菜单管理信息中的配置信息，加载菜单对应子应用的配置文件，根据配置文件加载子应用的目标文件并执行。
[0011]进一步地，配置文件中还包括子应用的依赖信息，配置依赖的方法为：配置依赖子应用的标识；若依赖子应用不依赖其它子应用，则配置依赖子应用的目标文件路径，若依赖子应用已在其配置文件中配置其自身依赖，则配置依赖子应用的配置文件路径，以使得子应用根据依赖子应用的标识，以及依赖子应用的目标文件路径或配置文件路径，加载被依赖子应用。
[0012]进一步地，在代码执行阶段，主应用根据菜单管理信息中的配置信息，加载菜单对应子应用的配置文件，根据配置文件加载子应用的目标文件并执行，包括：用户访问某菜单，根据菜单管理信息加载菜单对应子应用的配置文件；主应用根据子应用的配置文件加载子应用目标文件；根据菜单管理信息中配置信息，获取菜单对应组件的名称，获取子应用程序接口中抛出的对应名称组件引用，在主应用中渲染该组件，完成业务功能。
[0013]进一步地，在代码执行阶段，主应用根据菜单管理信息中的配置信息，加载菜单对应子应用的配置文件，根据配置文件加载子应用的目标文件并执行，包括：用户访问某菜单，根据菜单管理信息加载子应用的配置文件；根据配置文件确定子应用是否依赖其他子应用；如果依赖其他子应用，加载被依赖子应用，将被依赖子应用程序接口抛出的组件与方法，挂载在window对象与子应用唯一标识一一对应的属性上，以便子应用中通过特殊标识使用依赖的其他子应用程序接口抛出的方法和组件；主应用根据子应用的配置文件加载子应用的目标文件；根据菜单管理信息中配置信息，获取菜单对应组件的名称，获取子应用程序接口中抛出的对应名称组件引用，在主应用中渲染该组件，完成业务功能。
[0014]进一步地，所述方法还包括：将新的公共组件或者公共方法开发为一个公共库子应用；所述公共库子应用程序接口抛出公共组件或公共方法的引用；在其他子应用需要使用新的公共组件或公共方法时，需在本子应用中配置对该公共库子应用的依赖。
[0015]进一步地，使用脚手架快速生成子应用基础源码，包括子应用的配置文件、子应用的打包配置文件、子应用的源码和主应用部署包；子应用调试时运行主应用部署包，创建待调试子应用菜单，并调试子应用源码。
[0016]第二方面，本专利技术还提供了基于vue的系统架构改造获得的微前端系统，包括：主应用和子应用，所述主应用包括菜单注册模块和加载模块；所述菜单注册模块，用于将基于vue的系统作为主应用；编写子应用的源码，在子应用程序接口中抛出菜单对应组件的引用；编写子应用的打包配置文件，将所述源码中特殊标识的引用指向主应用中window对象上已挂载的公共组件或公共方法；将所述源码中对vue框架的引用指向主应用中window对象上挂载的vue框架引用；编写子应用的配置文件，
配置文件包括目标文件路径；根据子应用的配置文件和打包配置文件打包获得子应用的目标文件；注册菜单，确定菜单所属的子应用；配置菜单管理信息；所述加载模块，用于在代码执行阶段，主应用根据菜单管理信息中的配置信息，加载菜单对应子应用的配置文件，根据配置文件加载子应用的目标文件并执行。
[0017]进一步地，加载模块在代码执行阶段，主应用根据菜单管理信息中的配置信息，加载菜单对应子应用的配置文件，根据配置文件加载子应用的目标文件并执行，包括：用户访问某菜单，根据菜单管理信息加载配置文件；主应用根据子应用的配置文件加载子应用目标文件；根据菜单管理信息中配置信息，获取菜单对应组件的名称，获取子应用程序接口中抛出的对应名称组件引用，在主应用中渲染该组件，完成业务功能。
[0018]进一步地，所述配置文件中还包括子应用的依赖信息，配置依赖的方法为：配置依赖子应用的标识；若依赖子应用不依赖其它子应用，则配置依赖子应用的目标文件路径，若依赖子应用已在其配置文件中配置其自身依赖，则配置依赖子应用的配置文件路径，以使得子应用根据依赖子应用的标识，以及依赖子应用的目标文件路径或配置文件路径，加载被依赖子应用。
[0019]再进一步地，加载模块在代码执行本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.将基于vue的系统架构改造成微前端架构的方法，其特征在于，包括：将基于vue的系统作为主应用；编写子应用的源码，在子应用程序接口中抛出菜单对应组件的引用；编写子应用的打包配置文件，将所述源码中特殊标识的引用指向主应用中window对象上已挂载的公共组件或公共方法；将所述源码中对vue框架的引用指向主应用中window对象上挂载的vue框架引用；编写子应用的配置文件，配置文件包括目标文件路径；根据子应用的配置文件和打包配置文件打包获得子应用的目标文件；注册菜单，确定菜单所属的子应用；配置菜单管理信息，以使得在代码执行阶段，主应用根据菜单管理信息中的配置信息，加载菜单对应子应用的配置文件，根据配置文件加载子应用的目标文件并执行。2.如权利要求1所述的将基于vue的系统架构改造成微前端架构的方法，其特征在于，配置文件中还包括子应用的依赖信息，配置依赖的方法为：配置依赖子应用的标识；若依赖子应用不依赖其它子应用，则配置依赖子应用的目标文件路径，若依赖子应用已在其配置文件中配置其自身依赖，则配置依赖子应用的配置文件路径，以使得子应用根据依赖子应用的标识，以及依赖子应用的目标文件路径或配置文件路径，加载被依赖子应用。3.如权利要求1所述的将基于vue的系统架构改造成微前端架构的方法，其特征在于，在代码执行阶段，主应用根据菜单管理信息中的配置信息，加载菜单对应子应用的配置文件，根据配置文件加载子应用的目标文件并执行，包括：用户访问某菜单，根据菜单管理信息加载菜单对应子应用的配置文件；主应用根据子应用的配置文件加载子应用目标文件；根据菜单管理信息中配置信息，获取菜单对应组件的名称，获取子应用程序接口中抛出的对应名称组件引用，在主应用中渲染该组件，完成业务功能。4.如权利要求1所述的将基于vue的系统架构改造成微前端架构的方法，其特征在于，在代码执行阶段，主应用根据菜单管理信息中的配置信息，加载菜单对应子应用的配置文件，根据配置文件加载子应用的目标文件并执行，包括：用户访问某菜单，根据菜单管理信息加载子应用的配置文件；根据配置文件确定子应用是否依赖其他子应用；如果依赖其他子应用，加载被依赖子应用，将被依赖子应用程序接口抛出的组件与方法，挂载在window对象与子应用唯一标识一一对应的属性上，以便子应用中通过特殊标识使用依赖的其他子应用程序接口抛出的方法和组件；主应用根据子应用的配置文件加载子应用的目标文件；根据菜单管理信息中配置信息，获取菜单对应组件的名称，获取子应用程序接口中抛出的对应名称组件引用，在主应用中渲染该组件，完成业务功能。5.如权利要求1所述的将基于vue的系统架构改造成微前端架构的方法，其特征在于，所述方法还包括：将新的公共组件或者公共方法开发为一个公共库子应用；所述公共库子应用程序接口抛出公共组件或公共方法的引用；在其他子应用需要使用新的公共组件或公共方法时，需在本子应用中配置对该公共库子应用的依赖。6.如权利要求1所述的将基于vu...

【专利技术属性】
技术研发人员：李欣雨，甘露平，齐刚，朱辰泽，胡银华，杨利利，
申请(专利权)人：国电南京自动化股份有限公司，
类型：发明
国别省市：