Micro-front-end application management method and device, electronic equipment and storage medium

Abstract

The application provides a micro-front-end application management method and device, electronic equipment and a storage medium, the method comprising: distributing paths of multiple sub-applications to the same domain name; building a base library and packing plugins of the base library by using a module packer; each of the multiple sub-applications can introduce the packed plugins through a label; listening to route changes of a current sub-application; when a route change is listened to, a jump instruction is intercepted, a new route address is obtained, it is judged whether the new route address is within a route range of the current sub-application and the plugins of the base library, and if not, the new route address is refreshed and jumped to. The application can integrate each sub-application of the front end into one, and can realize independent development and independent maintenance of each sub-application of the front end, thereby improving the research and development efficiency.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer front-end, and particularly relates to a micro-front-end application management method and device, electronic equipment and a storage medium. BACKGROUND

[0002] A modern responsible front-end application or website is usually composed of many functional modules, and these functional modules are often responsible by different teams, each team will have its own separate business field, such as a module responsible for permission authentication, a module responsible for network communication, and in this background, it is extremely difficult to maintain a unified front-end application. SUMMARY

[0003] Therefore, the embodiments of the present application provide a micro-front-end application management method and device, electronic equipment and a storage medium to solve the problem that it is extremely difficult to maintain a unified front-end application in the prior art.

[0004] According to an aspect of the present application, a micro-front-end application management method is provided, comprising the steps of:

[0005] Distributing paths of a plurality of sub-applications to the same domain name;

[0006] Building a base library, and packaging plugins of the base library by using a module packager; each of the plurality of sub-applications can introduce the packaged plugins by using tags;

[0007] Listening to route changes of a current sub-application; when the route changes are listened to, a jump instruction is intercepted, a new route address is obtained, and it is determined whether the new route address is within the route range of the current sub-application and the plugins of the base library; if not, the new route address is refreshed and jumped to.

[0008] Optionally, refreshing and jumping to the new route address comprises:

[0009] Adding a preset identifier in the new route address, and when the preset identifier is detected, a page refresh function is called to jump to the new route address.

[0010] Optionally, if the new route address is within the range of the current sub-application and the base library, the new route address is switched to without refreshing.

[0011] Optionally, the micro-front-end application management method further comprises the steps of:

[0012] Building a common component library; each of the plurality of sub-applications uses the common component library.

[0013] Optionally, building the base library comprises: building the base library by using a Vue framework.

[0014] Optionally, the module packager comprises webpack.

[0015] Optionally, each of the plurality of sub-applications can introduce the packaged plugin in the form of a tag.

[0016] Each of the plurality of sub-applications can introduce the packaged plugin through a Script tag.

[0017] According to another aspect of the present application, there is provided an application management device for micro front-ends, comprising:

[0018] a route distribution module configured to distribute paths of a plurality of sub-applications to a same domain name;

[0019] a base library building module configured to build a base library and to package plugins of the base library using a module packager, and each of the plurality of sub-applications can introduce the packaged plugin through a tag;

[0020] an access module configured to listen to route changes of a current sub-application, to intercept a jump instruction when a route change is detected, to obtain a new route address, and to determine whether the new route address is within a route range of the current sub-application and the plugins of the base library, and to refresh and jump to the new route address if the new route address is not within the route range.

[0021] According to another aspect of the present application, there is provided an electronic device, comprising:

[0022] a processor; and

[0023] a memory storing a program,

[0024] wherein the program comprises instructions that, when executed by the processor, cause the processor to perform the method described above.

[0025] According to another aspect of the present application, there is provided a non-transitory computer readable storage medium storing computer instructions, wherein the computer instructions are configured to cause a computer to perform the method described above.

[0026] The micro front-end application management method and device, the electronic device, and the storage medium provided in the embodiments of the present application distribute paths of a plurality of sub-applications to a same domain name through route distribution, then build a unified base library, so that each sub-application can reference plugins of the base library through a tag at an entry. A route navigation guard is also used, cross-sub-application jumping adopts a multi-page application mode, and sub-application internal page switching adopts a single-page application mode, thereby achieving management of the plurality of sub-applications. Each sub-application can be independently developed, independently run, and independently deployed, thereby reducing coupling between projects and improving project extensibility. A common component library is also used, thereby achieving uniform styles and avoiding discontinuous user experience caused by differences between sub-applications. BRIEF DESCRIPTION OF DRAWINGS

[0027] Figure 1 a flowchart of an application management method of a micro front-end according to an example embodiment of the present application is shown;

[0028] Figure 2 a schematic block diagram of an application management apparatus of a micro front-end according to an example embodiment of the present application is shown;

[0029] Figure 3 a structural block diagram of an example electronic device that can be used to implement embodiments of the present application is shown. DETAILED DESCRIPTION

[0030] Embodiments of the present application will be described below in greater detail with reference to the accompanying drawings. While certain embodiments of the present application are shown in the drawings, it is understood that the present application can be embodied in various forms and should not be interpreted in a limited sense as set forth in the embodiments set forth herein, but rather the embodiments are provided to more thoroughly and completely understand the present application. It should be understood that the drawings and embodiments of the present application are for exemplary purposes only and are not intended to limit the scope of protection of the present application.

[0031] It should be understood that the various steps of the method embodiments of the present application can be performed in different orders and / or in parallel. In addition, the method embodiments can include additional steps and / or omit performing the steps shown. The scope of the present application is not limited in this respect.

[0032] The term "comprising" and variations thereof as used herein are used inclusively, i.e., "including, but not limited to." The term "based on" is "based, at least in part, on." The term "one embodiment" means "at least one embodiment." The term "another embodiment" means "at least one additional embodiment." The term "some embodiments" means "at least some embodiments." Related definitions of other terms are given in the description below. It is noted that the concepts "first," "second," etc. mentioned in the present application are merely used to distinguish different apparatuses, modules or units, and are not intended to limit the order or interdependence of the functions performed by these apparatuses, modules or units.

[0033] It is noted that the terms "one," "multiple," etc. mentioned in the present application are illustrative and not limiting, and those skilled in the art should understand that, unless otherwise explicitly stated in the context, it should be understood as "one or more." The names of the messages or information exchanged between the multiple apparatuses in the embodiments of the present application are merely for illustrative purposes, and are not intended to limit the scope of the messages or information.

[0034] The schemes of the present application will be described below with reference to the accompanying drawings, such as Figure 1As shown, the exemplary embodiment of the present application provides a micro-frontend application management method, comprising the steps of:

[0035] S1, distributing paths of multiple sub-applications to the same domain name;

[0036] S2, building a base library and packaging plugins of the base library using a module packager; each of the multiple sub-applications can introduce the packaged plugins through tags;

[0037] S3, listening to route changes of the current sub-application; when a route change is listened to, a jump instruction is intercepted, a new route address is obtained, it is judged whether the new route address is within the route range of the current sub-application and the plugins of the base library, and if not, the new route address is refreshed and jumped to.

[0038] Among them, micro-frontend is a way of front-end application construction, which is used to integrate multiple front-end applications into one. Sub-application refers to a program and resource running on various terminal devices, which in the exemplary embodiment of the present application mainly refers to a code running on a PC browser provided by HTML, CSS and JS, and a back-end API provides business function services and data access services.

[0039] In the exemplary embodiment of the present application, paths of multiple sub-applications are first distributed to the same domain name, and then a unified base library is built, so that each sub-application can reference the plugins of the base library through tags at the entrance. When a cross-sub-application jump, i.e. the new route address is not within the route range of the current sub-application and the plugins of the base library, is listened to, the new route address is refreshed and jumped to. The exemplary embodiment of the present application can integrate each sub-application of the front-end into one, and can realize independent development and maintenance of each sub-application of the front-end, improving the research and development efficiency. Moreover, each sub-application can have authentication, navigation and other general functions when referencing the base library for the first time, and the sub-application only needs to focus on business logic, so that the best micro-frontend solution can be realized at the minimum cost. The sub-application development does not need to be modified too much, and the user experience is more consistent when accessing different front-end applications.

[0040] In some embodiments, different sub-applications are distributed to different directories of the same domain name by a web server.

[0041] As an implementation, two sub-applications home and about are set, and the web server can distribute the home sub-application and the about sub-application to different directories of the domain name xx.com through an alias command. The home sub-application can be distributed to the / home / work / home / dist directory, and the about sub-application is distributed to the / home / work / about / dist directory. After being distributed by the web server, the user can access the sub-applications home and about by accessing the same domain name xx.com.

[0042] The web server is a website server, which is used to process the request of a web client such as a browser and return the resource required by the front end, such as Nginx.

[0043] In some other embodiments, the refreshing jump to the new route address includes:

[0044] A preset identifier is added in the new route address, and when the preset identifier is detected, a page refreshing function is called to jump to the new route address.

[0045] As an implementation, the preset identifier can be set as refresh=true, and when refresh=true is detected in the new route address, the page refreshing function is called to jump to the new route address, so as to jump from the page of the current sub-application to the page of another sub-application. In this embodiment, the problem of cross-sub-application access is solved through the route identifier, and the flexibility is high.

[0046] As an example, when entering the about sub-application from the home sub-application, the jump instruction is intercepted, and the new route address is obtained. Since the route address of the about sub-application is not within the route range of the home sub-application and the plug-in of the base library, the preset identifier refresh=true is added in the new route address, the page refreshing function is called to jump to the new route address, and the multi-page application mode is adopted to jump from the page of the current home sub-application to the page of the about sub-application.

[0047] In some other embodiments, if the new route address is within the range of the current sub-application and the base plug-in, there is no refreshing to switch to the new route address.

[0048] As an implementation manner, the home sub-application includes two pages, home / page1 and home / page2. When entering the home / page2 page from the home / page1 page, the address of the home / page2 page is within the scope of the current sub-application and the base plug-in, and then the single-page application mode is adopted to switch from the current home / page1 page to the home / page2 page without refreshing.

[0049] In the example embodiment of the application, the route navigation guard is adopted, the multi-page application mode is adopted for cross-sub-application jumping, the problem of non-existing route or white screen of page can be avoided, the single-page application mode is adopted for internal page switching of the sub-application, unnecessary jumping and repeated rendering are avoided, the switching speed between pages is improved, and the user experience is improved.

[0050] In some other embodiments, the application management method of the micro-frontend further includes the steps of:

[0051] A common component library is built, and each sub-application in the plurality of sub-applications adopts the common component library.

[0052] The style of the common component library can be uniformly customized, and each sub-application can reference the CSS file generated by the common component library when loading.

[0053] In the embodiment, each sub-application adopts the common component library, the style is unified, and the discontinuous user experience caused by the difference between the sub-applications is avoided.

[0054] In some other embodiments, the base library is built by using the Vue framework. The Vue framework is a progressive framework for building user interfaces, and can independently complete the javascript framework of the front-end and back-end separated web project. The Vue plug-in mechanism does not have strict restrictions on the function range, which means that various functions can be realized in the base library according to business requirements, such as some common user management, permission management, configuration management, etc.

[0055] In some other embodiments, other web frameworks such as React can also be used to build the base library.

[0056] In some other embodiments, the qiankun framework or the microApp framework can also be used to build the base library.

[0057] In some other embodiments, the module packager includes webpack, the webpack can package the plug-in of the base library into a directly executable UMD format module, and each sub-application can introduce the packaged plug-in through the tag.

[0058] Wherein, the webpack is a static module bundler for modern Javascript applications, such as packaging the framework such as Vue into html, js, css and other files recognizable by the browser.

[0059] In some embodiments, each of the plurality of sub-applications can introduce the packaged plugin in the form of a tag, including:

[0060] Each of the plurality of sub-applications can introduce the packaged plugin through a Script tag.

[0061] In the prior art, the Vue plugin can be published to a public or private NPM repository for each sub-application to reference. Each sub-application can be installed during development. However, when the plugin function is upgraded later, each sub-application needs to be upgraded one by one, which brings great inconvenience and affects development efficiency.

[0062] In the present embodiment, the plugin of the Vue framework is packaged into a UMD format module by webpack, and each sub-application can introduce the packaged plugin through a Script tag. When accessed by the browser, as long as one sub-application introduces the packaged plugin, other sub-applications will use the platform cache by default, effectively improving access efficiency, and the plugin itself can be developed and maintained independently, improving development efficiency.

[0063] In the present embodiment, the front-end base library is implemented through the Vue plugin mechanism, the JS file that can be introduced by the sub-application is output through Webpack, and the route guard and unified authentication are implemented in the base library, which is high in flexibility and easy to maintain, and the sub-application conversion cost is low.

[0064] As shown in Figure 2 The present embodiment also provides an application management device 1100 of micro front-end, including:

[0065] The route distribution module 1101 is configured to distribute the paths of the plurality of sub-applications to the same domain name.

[0066] The base library building module 1102 is configured to build a base library and package the plugin of the base library by using a module bundler. Each of the plurality of sub-applications can introduce the packaged plugin through a tag.

[0067] The access module 1103 is configured to listen to the route change of the current sub-application. When the route change is listened to, the jump instruction is intercepted, the new route address is obtained, it is judged whether the new route address is within the route range of the current sub-application and the plugin of the base library, and if not, the new route address is refreshed and jumped to.

[0068] In the exemplary embodiments of the present application, the paths of the plurality of sub-applications are first distributed to the same domain name, and then a unified base library is built, so that each sub-application can refer to the plug-ins of the base library through a label at the entry. When it is detected that the cross-sub-application jump, i.e., the new route address is not within the route range of the current sub-application and the plug-ins of the base library, the new route address is refreshed and jumped to. The exemplary embodiments of the present application can integrate the front-end sub-applications into one, and can realize independent development and maintenance of the front-end sub-applications, thereby improving the development efficiency. Moreover, each sub-application can have the authentication, navigation and other common functions when referring to the base library for the first time, and the sub-application only needs to focus on the business logic, thereby realizing the best micro-front-end solution at the minimum cost. The sub-application development does not need to be modified too much, and the user experience is more consistent when accessing different front-end applications.

[0069] In some embodiments, the different sub-applications are distributed to different directories of the same domain name by the web server.

[0070] As an embodiment, two sub-applications home and about are set, and the web server can distribute the home sub-application and the about sub-application to different directories of the domain name xx.com through the alias command. The home sub-application can be distributed to the / home / work / home / dist directory, and the about sub-application is distributed to the / home / work / about / dist directory. After being distributed by the web server, the user can access different sub-applications by accessing the same domain name xx.com.

[0071] In some embodiments, the refreshing jump to the new route address includes:

[0072] A preset identifier is added in the new route address, and when the preset identifier is detected, a page refresh function is called to jump to the new route address.

[0073] As an embodiment, the preset identifier can be set as refresh=true, and when refresh=true is detected in the new route address, the page refresh function is called to jump to the new route address, thereby jumping from the page of the current sub-application to the page of another sub-application. In this embodiment, the cross-sub-application access problem is solved through the route identifier, and the flexibility is high.

[0074] As an example, when entering the about sub-application from the home sub-application, the jump instruction is intercepted, and a new route address is obtained. Since the route address of the about sub-application is not within the route range of the home sub-application and the plug-in of the base library, a preset identifier refresh=true is added in the new route address, a page refresh function is called to jump to the new route address, and a multi-page application mode is used to refresh the page from the current home sub-application to the page of the about sub-application.

[0075] In yet some embodiments, if the new route address is within the range of the current sub-application and the base plug-in, the new route address is switched without refreshing.

[0076] As an embodiment, the home sub-application includes two pages, home / page1 and home / page2. When entering the home / page2 page from the home / page1 page, the address of the home / page2 page is within the range of the current sub-application and the base plug-in, and a single-page application mode is used to switch from the current home / page1 page to the home / page2 page without refreshing.

[0077] In the exemplary embodiments of the present application, the route navigation guard is used, the multi-page application mode is used for cross-sub-application jump, the problem of non-existent route or white screen page can be avoided, the single-page application mode is used for internal page switching of the sub-application, unnecessary jump and repeated rendering are avoided, the switching speed between pages is improved, and the user experience is improved.

[0078] In yet some embodiments, the application management device of the micro front end further includes:

[0079] The component library building module 1104 is configured to build a common component library. Each of the plurality of sub-applications uses the common component library.

[0080] The style of the common component library can be uniformly customized, and each sub-application can reference the CSS file generated by the common component library when loading.

[0081] In the present embodiment, each sub-application uses the common component library, the style is unified, and the discontinuous user experience caused by the difference between the sub-applications is avoided.

[0082] In yet some embodiments, the base library is built using the Vue framework. The Vue framework is a progressive framework for building user interfaces, and can independently complete the front-end and back-end separated web project javascript framework. The Vue plug-in mechanism does not have strict restrictions on the function range, which means that various functions can be realized in the base library according to business needs, such as some common user management, permission management, configuration management, etc.

[0083] In yet some embodiments, other Web frameworks can also be used to build the base library, such as React.

[0084] In yet some embodiments, the qiankun framework or the microApp framework can also be used to build the base library.

[0085] In yet some embodiments, the module packager includes webpack, which can package the plugins of the base library into directly executable UMD format modules, and each sub-application can introduce the packaged plugins in the form of tags.

[0086] In yet some embodiments, the module packager includes webpack, which can package the plugins of the base library into directly executable UMD format modules, and each sub-application can introduce the packaged plugins in the form of tags.

[0087] In yet some embodiments, each of the plurality of sub-applications can introduce the packaged plugins in the form of Script tags.

[0088] In yet some embodiments, each of the plurality of sub-applications can introduce the packaged plugins in the form of Script tags.

[0089] In the prior art, Vue plugins can be published in public or private NPM repositories for each sub-application to reference. Each sub-application can install the plugin during development. However, when the plugin function is upgraded later, each sub-application needs to be upgraded one by one, which is very inconvenient and affects development efficiency.

[0090] In the present embodiment, the plugins of the Vue framework are packaged into UMD format modules by webpack, and each sub-application can introduce the packaged plugins in the form of Script tags. When accessed in the browser, as long as one sub-application introduces the packaged plugins, other sub-applications will use the platform cache by default, effectively improving access efficiency, while the plugins themselves can be developed and maintained independently, improving development efficiency.

[0091] In the present embodiment, the Vue plugin mechanism is used to implement the front-end base library, and Webpack is used to output JS files that can be introduced by sub-applications, and the base library is implemented with route guards and unified authentication, which is highly flexible and easy to maintain, and the cost of sub-application transformation is low.

[0092] The exemplary embodiments of the present application also provide an electronic device, comprising: at least one processor; and a memory connected with the at least one processor in communication. The memory stores a computer program capable of being executed by the at least one processor, and the computer program, when executed by the at least one processor, is configured to cause the electronic device to perform the method according to the embodiments of the present application.

[0093] The exemplary embodiments of the present application also provide a non-transitory computer readable storage medium storing a computer program, wherein the computer program, when executed by a processor of a computer, is configured to cause the computer to perform the method according to the embodiments of the present application.

[0094] The exemplary embodiments of the present application also provide a computer program product comprising a computer program, wherein the computer program, when executed by a processor of a computer, is configured to cause the computer to perform the method according to the embodiments of the present application.

[0095] Reference Figure 3 A block diagram of the structure of an electronic device 1200 that can be a server or a client of the present application, which is an example of a hardware device that can be applied to aspects of the present application, will now be described. The electronic device is intended to represent various forms of digital electronic computing devices such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other appropriate computing devices. The electronic device can also represent various forms of mobile devices such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be examples only, and are not meant to limit implementations of the present application described and / or claimed in this document.

[0096] As Figure 3 shown, the electronic device 1200 includes a computing unit 1201 that can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) 1202 or a computer program loaded from a storage unit 1208 into a random access memory (RAM) 1203. Various programs and data required for the operation of the electronic device 1200 can also be stored in the RAM 1203. The computing unit 1201, the ROM 1202, and the RAM 1203 are connected to each other through a bus 1204. An input / output (I / O) interface 1205 is also connected to the bus 1204.

[0097] The plurality of components in the electronic device 1200 are connected to the I / O interface 1205, including an input unit 1206, an output unit 1207, a storage unit 1208, and a communication unit 1209. The input unit 1206 can be any type of device that can input information to the electronic device 1200, and can receive inputted digital or character information, and generate key signal inputs related to user settings and / or function controls of the electronic device. The output unit 1207 can be any type of device that can present information, and can include, but is not limited to, a display, a speaker, a video / audio output terminal, a vibrator, and / or a printer. The storage unit 1208 can include, but is not limited to, a magnetic disk, an optical disk. The communication unit 1209 allows the electronic device 1200 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks, and can include, but is not limited to, a modem, a network card, an infrared communication device, a wireless communication transceiver, and / or a chipset, such as a Bluetooth™ device, a WiFi device, a WiMax device, a cellular communication device, and / or the like.

[0098] The computing unit 1201 can be various general and / or special purpose processing components having processing and computing capabilities. Some examples of the computing unit 1201 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any appropriate processor, controller, microcontroller, etc. The computing unit 1201 performs various methods and processes described above. For example, in some embodiments, the application management method of the micro-frontend can be implemented as a computer software program tangibly embodied in a machine-readable medium, such as the storage unit 1208. In some embodiments, part or all of the computer program can be loaded and / or installed onto the electronic device 1200 via the ROM 1202 and / or the communication unit 1209. In some embodiments, the computing unit 1201 can be configured to perform the application management method of the micro-frontend by any other appropriate means, such as by means of firmware.

[0099] Program code for carrying out methods of the present application can be written in any combination of one or more programming languages. The program code can be provided to a processor or controller of a general purpose computer, special purpose computer, or other programmable data processing apparatus to produce a machine, such that the program code, when executed by the processor or controller, produces a means for implementing the functions / operations specified in the flowcharts and / or block diagrams. The program code can be executed entirely on a machine, partially on a machine, partially on a machine as a stand-alone software package, partially on a machine and partially on a remote machine or entirely on a remote machine or server.

[0100] In the context of the present application, a machine-readable medium can be a tangible medium that can contain or store program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. Machine-readable storage medium can include, but are not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of the machine-readable storage medium will include one or more lines of electrical connections, portable computer disks, hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or Flash memory), optical fibers, portable compact disc read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination of the foregoing.

[0101] As used in the present application, the terms "machine-readable medium" and "computer- readable medium" refer to any computer program product, apparatus and / or device (e.g., magnetic discs, optical disks, memory, Programmable Logic Devices (PLDs)) used to provide machine instructions and / or data to a programmable processor, including a machine-readable medium that receives machine instructions as a machine-readable signal. The term "machine-readable signal" refers to any signal that can be used to provide machine instructions and / or data to a programmable processor.

[0102] To provide for interaction with a user, the systems and techniques described here can be implemented on a computer having a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user and a keyboard and a pointing device (e.g., a mouse or a trackball) by which the user can provide input to the computer. Other kinds of devices can be used to provide for interaction with a user as well; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form, including acoustic, speech, or tactile input.

[0103] The systems and techniques described here can be implemented in a computing system that includes a back end component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front end component (e.g., a user computer having a graphical user interface or a Web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such back end, middleware, or front end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network (LAN), a wide area network (WAN), and the Internet.

[0104] The computing system can include clients and servers. A client and server are generally remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other.

Claims

1. A method for application management of a micro-front-end, characterized in that, The method comprises the steps of: distributing paths of a plurality of sub-applications to the same domain name; building a base library and packaging plugins of the base library by using a module packager; each of the plurality of sub-applications can introduce the packaged plugins by using tags; listening to route changes of a current sub-application; when the route changes are listened to, a jump instruction is intercepted, a new route address is obtained, it is judged whether the new route address is within a route range of the current sub-application and the plugins of the base library, and if not, the new route address is refreshed and jumped to.

2. The application management method of a micro-front end according to claim 1, wherein, The refreshing and jumping to the new route address comprises: adding a preset identifier in the new route address, and when the preset identifier is detected, a page refreshing function is called to jump to the new route address. 3.The application management method of a micro-front end according to claim 1, wherein, If the new route address is within the range of the current sub-application and the base library, the new route address is switched to without refreshing. 4.The application management method of a micro-front end according to claim 1, wherein, The method further comprises the steps of: building a common component library; each of the plurality of sub-applications uses the common component library. 5.The application management method of a micro-front end according to claim 1, wherein, The base library is built by using a Vue framework.

6. The application management method of a micro-front end according to claim 5, wherein, The module packager comprises webpack.

7. The application management method of a micro-front end according to claim 5, wherein, Each of the plurality of sub-applications can introduce the packaged plugins by using tags, and the tags comprise Script tags. The method comprises:

8. An application management apparatus of a micro front end, characterized by comprising: a route distribution module configured to distribute paths of a plurality of sub-applications to the same domain name; a base library building module configured to build a base library and package plugins of the base library by using a module packager; each of the plurality of sub-applications can introduce the packaged plugins by using tags; an access module configured to listen to route changes of a current sub-application; when the route changes are listened to, a jump instruction is intercepted, a new route address is obtained, it is judged whether the new route address is within a route range of the current sub-application and the plugins of the base library, and if not, the new route address is refreshed and jumped to. The method comprises:

9. An electronic device, comprising: a processor; and a memory storing programs, wherein the programs comprise instructions that, when executed by the processor, cause the processor to perform the method according to any one of claims 1-7. The computer instructions are configured to cause a computer to perform the method according to any one of claims 1-7.

10. A non-transitory computer-readable storage medium having stored thereon computer instructions, wherein the computer instructions, when executed by a processor, cause the processor to perform the method of any one of claims 1-9. ​ ​

Images