基于模块联邦实现的vue模块加载方法、系统及介质与流程

本技术涉及组件加载领域，具体而言，涉及一种基于模块联邦实现的vue模块加载方法、系统及介质。

背景技术：

1、在设计开发各个前端工程时，常常会面临同一个组件，需要在各个不同的工程中重复使用的问题，如果在各个工程中都重复写一遍，每次都付出了多余的开发成本，而且开发了多套代码，后续维护时需要重复多次的修改、构建、发布,目前业界主要有3个方案来解决前端代码的复用问题。

2、使用npm来管理：把代码放在各个工程中，但放的是编译后的产物，源代码只保留一份；使用qiankun等微前端框架：子应用以路由的形式导出页面，主应用动态加载前端静态资源，然后通过路由的管理来操作页面；使用模块联邦：子应用以文件的形式导出模块，主应用动态加载前端静态资源，最后通过模块管理的方式引入,使用npm来管理，存在以下弊端：集成旧代码时，必须要对旧代码进行改造然后发布npm，有较大的改造成本；更新过程繁琐，需要在npm中发布新版本，然后再到主应用中升级版本；无法对构建过的代码进行热更新，每次升级npm的依赖以后，都需要重新构建部署，依赖出现了问题，增加了系统的维护成本。

3、使用qiankun等微前端框架，存在以下弊端：只能以路由为单位集成，必须整个页面嵌入，无法更细粒度的控制模块的集成；需要对子项目做入侵式的代码改造。直接使用模块联邦也存在以下问题：引用组件时，没有样式隔离；无法动态添加需要导入的新模块；针对上述问题，目前亟待有效的技术解决方案。

技术实现思路

1、本技术实施例的目的在于提供一种基于模块联邦实现的vue模块加载方法、系统及介质，通过分析vue组件的功能进行不同区块划分，不同功能的区块写入不同的组件样式，且可以动态添加导入的新模块至组件区块内，提高加载灵活性。

2、本技术实施例还提供了一种基于模块联邦实现的vue模块加载方法，包括：

3、获取若干个vue组件的功能信息，根据功能信息生成若干个不同功能的组件区块；

4、获取配置参数，通过配置参数创建配置文件，通过配置文件对组件区块进行配置；

5、获取目标组件，将目标组件与配置完成后的组件区块进行比对筛选，得到加载目标对应的组件区块；

6、请求联邦配置，对联邦配置进行解析，并将解析结果传输至加载目标对应的组件区块，对加载信息进行优化，得到加载信息；

7、将加载信息传输至终端进行显示。

8、可选地，在本技术实施例所述的基于模块联邦实现的vue模块加载方法中，获取若干个vue组件的功能信息，根据功能信息生成若干个不同功能的组件区块，具体包括：

9、获取若干个vue组件的功能信息，将不同vue组件的功能信息进行比较，得到功能相似度；

10、判断所述功能相似度是否大于或等于预设的相似度阈值；

11、若小于，则根据功能信息生成若干个不同功能的组件区块；

12、若大于或等于，则生成合并系数，根据合并系数将对应的vue组件区块进行合并。

13、可选地，在本技术实施例所述的基于模块联邦实现的vue模块加载方法中，获取配置参数，通过配置参数创建配置文件，通过配置文件对组件区块进行配置，具体包括：

14、获取配置参数，根据配置参数创建配置文件；

15、将配置文件与标准配置文件进行比较，得到配置偏差率；

16、判断所述配置偏差率是否大于设定的配置偏差率阈值；

17、若大于，则动态调整配置参数；

18、若小于，则通过配置文件对组件区块进行配置，得到配置结果。

19、可选地，在本技术实施例所述的基于模块联邦实现的vue模块加载方法中，获取目标组件，将目标组件与配置完成后的组件区块进行比对筛选，得到加载目标对应的组件区块，具体包括：

20、获取目标组件，将目标组件与配置完成后的组件区块进行比对，得到比对结果；

21、判断比对结果是否成功，若比对成功，得到加载目标对应的组件区块；

22、若比对不成功，则生成新的加载模块，将新的加载模块添加至组件区块内。

23、可选地，在本技术实施例所述的基于模块联邦实现的vue模块加载方法中，请求联邦配置，对联邦配置进行解析，并将解析结果传输至加载目标对应的组件区块，对加载信息进行优化，得到加载信息，具体包括：

24、获取联邦配置，并将联邦配置进行解析，得到加载行为信息；

25、根据加载行为信息预测生成加载目标；

26、根据加载目标匹配对应的组件区块进行模块加载，得到加载信息。

27、可选地，在本技术实施例所述的基于模块联邦实现的vue模块加载方法中，将加载信息传输至终端进行显示，具体包括：

28、获取显示信息，通过显示信息分析渲染参数；

29、将显示信息与设定的显示信息进行比较，得到显示偏差率；

30、判断所述显示偏差率是否大于或等于设定的偏差率阈值；

31、若大于或或等于，则生成补偿信息，根据补偿信息对渲染参数进行补偿；

32、若小于，则将加载信息传输至终端进行显示。

33、第二方面，本技术实施例提供了一种基于模块联邦实现的vue模块加载系统，该系统包括：存储器及处理器，所述存储器中包括基于模块联邦实现的vue模块加载方法的程序，所述基于模块联邦实现的vue模块加载方法的程序被所述处理器执行时实现以下步骤：

34、获取若干个vue组件的功能信息，根据功能信息生成若干个不同功能的组件区块；

35、获取配置参数，通过配置参数创建配置文件，通过配置文件对组件区块进行配置；

36、获取目标组件，将目标组件与配置完成后的组件区块进行比对筛选，得到加载目标对应的组件区块；

37、请求联邦配置，对联邦配置进行解析，并将解析结果传输至加载目标对应的组件区块，对加载信息进行优化，得到加载信息；

38、将加载信息传输至终端进行显示。

39、可选地，在本技术实施例所述的基于模块联邦实现的vue模块加载系统中，获取若干个vue组件的功能信息，根据功能信息生成若干个不同功能的组件区块，具体包括：

40、获取若干个vue组件的功能信息，将不同vue组件的功能信息进行比较，得到功能相似度；

41、判断所述功能相似度是否大于或等于预设的相似度阈值；

42、若小于，则根据功能信息生成若干个不同功能的组件区块；

43、若大于或等于，则生成合并系数，根据合并系数将对应的vue组件区块进行合并。

44、可选地，在本技术实施例所述的基于模块联邦实现的vue模块加载系统中，获取配置参数，通过配置参数创建配置文件，通过配置文件对组件区块进行配置，具体包括：

45、获取配置参数，根据配置参数创建配置文件；

46、将配置文件与标准配置文件进行比较，得到配置偏差率；

47、判断所述配置偏差率是否大于设定的配置偏差率阈值；

48、若大于，则动态调整配置参数；

49、若小于，则通过配置文件对组件区块进行配置，得到配置结果。

50、第三方面，本技术实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质中包括基于模块联邦实现的vue模块加载方法程序，所述基于模块联邦实现的vue模块加载方法程序被处理器执行时，实现如上述任一项所述的基于模块联邦实现的vue模块加载方法的步骤。

51、由上可知，本技术实施例提供的一种基于模块联邦实现的vue模块加载方法、系统及介质，通过获取若干个vue组件的功能信息，根据功能信息生成若干个不同功能的组件区块；获取配置参数，通过配置参数创建配置文件，通过配置文件对组件区块进行配置；获取目标组件，将目标组件与配置完成后的组件区块进行比对筛选，得到加载目标对应的组件区块；请求联邦配置，对联邦配置进行解析，并将解析结果传输至加载目标对应的组件区块，对加载信息进行优化，得到加载信息；将加载信息传输至终端进行显示；通过分析vue组件的功能进行不同区块划分，不同功能的区块写入不同的组件样式，且可以动态添加导入的新模块至组件区块内，提高加载灵活性。