Method and system for obtaining micro-frontend system architecture based on vue-based system architecture reconstruction

Abstract

The application discloses a method and system for obtaining a micro-frontend system architecture based on vue system architecture reconstruction, taking a vue-based management system as a main application; source code of a sub-application is written, and a menu corresponding component reference is thrown in a sub-application interface; a packaging configuration file is written, and a special identification reference in the source code of the sub-application is pointed to a common component or method mounted on a window object in the main application; a vue framework reference in the source code of the sub-application is pointed to a vue framework reference mounted on the window object in the main application; target files are obtained by packaging according to a configuration file and the packaging configuration file; a menu is registered, and a sub-application to which the menu belongs is determined; menu management information is configured, so that in a code execution stage, the main application loads the target files of the sub-application and executes. According to the application, the source code of the business functions of part of the menus is independently developed, independently packaged and independently deployed to form the sub-application.

Description

Technical Field

[0001] This invention relates to the field of front-end development technology, specifically to a method for transforming a Vue-based management system architecture into a micro-front-end architecture. Background Technology

[0002] The existing project is a backend management system based on Vue.js, using the Vue.js frontend development framework. In this system, each menu item is bound to a Vue.js component. When a user accesses a menu item, the corresponding Vue.js component is rendered into the menu container.

[0003] A front-end project consisting of only one HTML file, with all functionality implemented using JavaScript, is called a Single-Page Application (SPage Application). Each HTML file contains a `window` object, a built-in global object in the browser. The properties of the `window` object are accessible to all JavaScript code loaded within that HTML file.

[0004] The Vue-based backend management system is a single-page application (SPA). The main application mounts methods on the `window` object, which can be accessed by sub-applications. In the existing project, common components and methods are used during business function development. These are abstractions of highly reusable code that can be directly called when needed, eliminating the need for repetitive development. These common components and methods are collectively referred to as common code. The system's business functions are presented in the form of menus. Developers create new menus and configure the relative paths of the corresponding source code in the menu management module, thus binding the menus to the business function code. The current frontend development method is a monolithic approach, where all source code resides in the same development directory. The same packaging tool is used to generate the deployment file. As the number of menus and the amount of code increase, the packaging process becomes excessively long and may even crash. Furthermore, when multiple developers collaborate on the system, code merging is required, increasing debugging time.

[0005] Micro-frontend is a front-end code organization method similar to microservices. It divides the front-end code into a main application and sub-applications. The main application serves as the project entry point and is responsible for activating and destroying the sub-applications. Sub-applications are developed, packaged, and deployed independently.

[0006] After transforming an existing project into a micro-frontend, if the common code is copied to the development directory of each sub-application, modifications to the common code will require changes to each sub-application, which is not conducive to code reuse.

[0007] Therefore, how to transform a Vue-based system architecture into a micro-frontend architecture is a technical problem that needs to be solved. Summary of the Invention

[0008] This invention aims to provide a method for transforming the architecture of Vue-based systems into a micro-frontend architecture.

[0009] To achieve the above-mentioned technical objectives, the present invention adopts the following technical solution.

[0010] In a first aspect, this invention provides a method for transforming a Vue-based system architecture into a micro-frontend architecture, including:

[0011] Use the Vue-based system as the main application;

[0012] Write the source code for the sub-application and throw a reference to the menu component in the sub-application interface;

[0013] Write the packaging configuration file for the sub-application, pointing the specially identified references in the source code to the public components or public methods already mounted on the window object in the main application; pointing the references to the Vue framework in the source code to the Vue framework references mounted on the window object in the main application; write the configuration file for the sub-application, which includes the target file path; and package the sub-application to obtain the target file based on the configuration file and the packaging configuration file.

[0014] Register the menu and determine the sub-application to which the menu belongs; configure the menu management information so that during the code execution phase, the main application loads the configuration file of the corresponding sub-application based on the configuration information in the menu management information, loads the target file of the sub-application based on the configuration file, and executes it.

[0015] Furthermore, the configuration file also includes the dependency information of the sub-application. The method for configuring dependencies is as follows: configure the identifier of the dependent sub-application; if the dependent sub-application does not depend on other sub-applications, configure the target file path of the dependent sub-application; if the dependent sub-application has already configured its own dependencies in its configuration file, configure the configuration file path of the dependent sub-application, so that the sub-application can load the dependent sub-application based on the identifier of the dependent sub-application and the target file path or configuration file path of the dependent sub-application.

[0016] Furthermore, during the code execution phase, the main application loads the configuration file of the corresponding sub-application based on the configuration information in the menu management information, loads the target file of the sub-application based on the configuration file, and executes it, including:

[0017] When a user accesses a menu, the configuration file of the corresponding sub-application is loaded based on the menu management information.

[0018] The main application loads the target file of the sub-application based on the sub-application's configuration file;

[0019] Based on the configuration information in the menu management information, obtain the name of the component corresponding to the menu, obtain the reference of the component with the corresponding name thrown in the sub-application interface, render the component in the main application, and complete the business function.

[0020] Furthermore, during the code execution phase, the main application loads the configuration file of the corresponding sub-application based on the configuration information in the menu management information, loads the target file of the sub-application based on the configuration file, and executes it, including:

[0021] When a user accesses a menu, the configuration file of the sub-application is loaded based on the menu management information;

[0022] The configuration file determines whether a sub-application depends on other sub-applications. If it depends on other sub-applications, the dependent sub-application is loaded, and the components and methods thrown by the dependent sub-application's API are mounted on the properties of the window object that correspond one-to-one with the unique identifier of the sub-application, so that the sub-application can use the methods and components thrown by the dependent sub-application's API through a special identifier.

[0023] The main application loads the target files of the sub-application based on the sub-application's configuration file;

[0024] Based on the configuration information in the menu management information, obtain the name of the component corresponding to the menu, obtain the reference of the component with the corresponding name thrown in the sub-application interface, render the component in the main application, and complete the business function.

[0025] Furthermore, the method also includes: developing the new public component or public method as a public library sub-application; the public library sub-application interface exposes a reference to the public component or public method;

[0026] When other sub-applications need to use new public components or public methods, they need to configure a dependency on that public library sub-application in this sub-application.

[0027] Furthermore, the scaffolding is used to quickly generate the basic source code of the sub-application, including the sub-application's configuration file, the sub-application's packaging configuration file, the sub-application's source code, and the main application deployment package; when debugging the sub-application, the main application deployment package is run, a menu of sub-applications to be debugged is created, and the sub-application source code is debugged.

[0028] Secondly, the present invention also provides a micro-frontend system obtained by modifying the system architecture based on Vue, including: a main application and a sub-application, wherein the main application includes a menu registration module and a loading module;

[0029] The menu registration module is used to: use the Vue-based system as the main application; write the source code of the sub-application, and expose references to the corresponding components of the menu in the sub-application interface; write the packaging configuration file of the sub-application, pointing the specially identified references in the source code to the public components or public methods already mounted on the window object in the main application; point the references to the Vue framework in the source code to the Vue framework references mounted on the window object in the main application; write the configuration file of the sub-application, which includes the target file path; package the sub-application to obtain the target file of the sub-application based on the sub-application configuration file and the packaging configuration file; register the menu, determine the sub-application to which the menu belongs; and configure menu management information.

[0030] The loading module is used during the code execution phase to load the configuration file of the sub-application corresponding to the menu according to the configuration information in the menu management information, and to load and execute the target file of the sub-application according to the configuration file.

[0031] Furthermore, during the code execution phase, the loading module loads the configuration files of the corresponding sub-applications based on the configuration information in the menu management information, loads the target files of the sub-applications according to the configuration files, and executes them, including:

[0032] When a user accesses a menu, a configuration file is loaded based on the menu management information.

[0033] The main application loads the target file of the sub-application based on the sub-application's configuration file;

[0034] Based on the configuration information in the menu management information, obtain the name of the component corresponding to the menu, obtain the reference of the component with the corresponding name thrown in the sub-application interface, render the component in the main application, and complete the business function.

[0035] Furthermore, the configuration file also includes the dependency information of the sub-application. The method for configuring dependencies is as follows: configure the identifier of the dependent sub-application; if the dependent sub-application does not depend on other sub-applications, configure the target file path of the dependent sub-application; if the dependent sub-application has already configured its own dependencies in its configuration file, configure the configuration file path of the dependent sub-application, so that the sub-application can load the dependent sub-application according to the identifier of the dependent sub-application and the target file path or configuration file path of the dependent sub-application.

[0036] Furthermore, during the code execution phase, the loading module loads the configuration files of the corresponding sub-applications based on the configuration information in the menu management information. It then loads and executes the target files of the sub-applications based on the configuration files, including:

[0037] When a user accesses a menu, the configuration file of the sub-application is loaded based on the menu management information;

[0038] The configuration file determines whether a sub-application depends on other sub-applications. If it depends on other sub-applications, the dependent sub-application is loaded, and the components and methods thrown by the dependent sub-application's API are mounted on the properties of the window object that correspond one-to-one with the sub-application's unique identifier, so that the sub-application can use the methods and components thrown by the dependent sub-applications through the special identifier.

[0039] The main application loads the target file of the sub-application based on the sub-application's configuration file;

[0040] Based on the configuration information in the menu management information, obtain the name of the component corresponding to the menu, obtain the reference of the component with the corresponding name thrown in the sub-application interface, render the component in the main application, and complete the business function.

[0041] The beneficial technical effects achieved by this invention are as follows: This method independently develops, packages, and deploys the source code of some menu business functions to form sub-applications. The deployment file path of the sub-applications is configured in the menu management, thus completing the binding between the menus and business functions.

[0042] This invention is a Vue-based backend management system that transforms the existing project's system architecture into a micro-frontend solution. Considering the development and use of common code, the common code that has already been developed in the existing system is thrown out in the main application for use by sub-applications, since the existing system code is the main application code in the micro-frontend.

[0043] This invention combines portions of the menu source code into a sub-application, which is developed, packaged, and deployed independently. The entire system consists of multiple sub-applications. As business functions and menus increase, the number of sub-applications also increases. Because the code size of a single sub-application is small, and each sub-application is packaged and deployed independently, the increase in business functions does not increase the packaging time of a single sub-application.

[0044] For newly developed common code, avoid developing new common code within the main application, as modifications to the main application code will lead to frequent system version updates. Instead, develop the common code as one or more sub-applications. Other sub-applications depend on the common code sub-applications and use their thrown components or methods, thus reducing modifications to the main application code. Attached Figure Description

[0045] Figure 1 This diagram illustrates the overall architecture of the micro-frontend solution provided in this application embodiment.

[0046] Figure 2 This illustrates the code execution flowchart provided in the embodiments of this application;

[0047] Figure 3 This is a flowchart illustrating the developer's operation process provided in the embodiments of this application. Specific implementation methods

[0048] The present invention will now be described in further detail with reference to the accompanying drawings and specific embodiments.

[0049] Example 1

[0050] Methods for obtaining a micro-frontend system architecture based on Vue system architecture transformation include:

[0051] Use a Vue-based management system as the main application; write sub-application source code, and expose references to the menu components in the sub-application's interface; for example: write the sub-application source code, expose the application interface in the sub-application's entry file, and expose the component references corresponding to the menu in the application interface, represented as key-value pairs. Example: The application interface is {menus: {MenuA: reference to the Menu A component, MenuB: reference to the Menu B component}}, and the menu is configured with a fixed prefix / MenuA / AppPath, where AppPath is the deployment path of the sub-application.

[0052] Write a packaging configuration file to point the specially marked references in the source code of the sub-application to the public components or public methods that are already mounted on the window object in the main application; point the references to the Vue framework in the source code of the sub-application to the Vue framework reference mounted on the window object in the main application, and the main application uses the same Vue framework reference;

[0053] Write a configuration file, which includes the target file path;

[0054] The target files of the sub-applications are obtained by packaging them according to the configuration file and the packaging configuration file.

[0055] Register the menu and determine the sub-application to which the menu belongs;

[0056] Configure menu management information so that during the code execution phase, the main application loads the configuration file of the corresponding sub-application based on the configuration information in the menu management information, loads the target file of the sub-application based on the configuration file, and executes it.

[0057] Specifically, optionally, the sub-application configuration file may also include sub-application dependency configuration.

[0058] In specific embodiments, some methods, such as lifecycle hook methods, can also be thrown out in the program interface of the sub-application, which can be used to write custom functions; this is prior art and will not be described in detail in this application.

[0059] This embodiment transforms the existing system into a micro-frontend solution, where each sub-application has independent code. However, some common components and methods are referenced by most sub-applications. Copying the code of these components and methods across all sub-applications could cause inconsistencies in the common code and increase the code size of each sub-application. Therefore, this embodiment provides a method for referencing existing common components and methods. Common components already developed in the existing system can be registered as global Vue components. Sub-applications and the main application use the same Vue reference, allowing sub-applications to directly use the global Vue components registered by the main application. Common components and methods can also be mounted on the `window` object, and sub-applications can configure and use these common components and methods through packaging tools.

[0060] Transforming the original monolithic application into a micro-frontend application reduced the pressure of packaging and multi-person development. The existing system was directly used as the main application source code, with modifications made to the menu loading section. The source code of already developed common components and methods remained unchanged, only their exception handling was implemented. This resulted in minimal modifications to the existing system source code, reducing development costs. Both the sub-application and the main application used the Vue technology stack, allowing the sub-application to use existing common components, reducing workload. The scaffolding was used to generate the basic code for the sub-applications, reducing the need for developers to copy and paste, and improving the development experience.

[0061] Example 2

[0062] Based on Embodiment 1, in this embodiment, during the code execution phase, the main application loads the configuration file of the sub-application corresponding to the menu according to the configuration information in the menu management information, loads the target file of the sub-application according to the configuration file, and executes it, including:

[0063] During the code execution phase, the main application loads the configuration files of the corresponding sub-applications based on the configuration information in the menu management information, loads the target files of the sub-applications according to the configuration files, and executes them, including:

[0064] When a user accesses a menu, a configuration file is loaded based on the menu management information.

[0065] The main application loads the target file of the sub-application based on the sub-application's configuration file;

[0066] The sub-application uses special identifiers to access public components and methods already mounted on the window object in the main application; based on the configuration information in the menu management information, it obtains the name of the component corresponding to the menu, obtains the corresponding component reference thrown in the sub-application interface, renders the component in the main application, and completes the business function.

[0067] Example 3

[0068] In this embodiment, considering instances where a sub-application depends on other sub-applications, the method further includes, based on embodiment 1, the dependency information of the sub-application being included in the configuration file, and the method for configuring the dependency is as follows:

[0069] Configure the identifier of the dependent sub-application; if the dependent sub-application does not depend on other sub-applications, configure the target file path of the dependent sub-application; if the dependent sub-application has already configured its own dependencies in its configuration file, configure the configuration file path of the dependent sub-application, so that the sub-application can load the dependent sub-application based on the identifier of the dependent sub-application and the target file path or configuration file path of the dependent sub-application.

[0070] The main application will attach the method thrown by this dependency to a property named after the dependent sub-application. For details on how developers create sub-applications, see [link to sub-application creation process]. Figure 3 ,include:

[0071] Use scaffolding to create sub-applications;

[0072] Enter the sub-application path and the target file path;

[0073] Generate the basic source code for the sub-application;

[0074] Determine if the application depends on other sub-applications; if so, configure the dependency information; otherwise, enable the sub-application debug mode.

[0075] Register menus in menu management, develop and debug sub-application source code, and package to generate target files;

[0076] Deploy the target file to the server.

[0077] Example 4

[0078] Based on Example 3, the code execution flow provided in this example is as follows: Figure 2 As shown, during the code execution phase, the main application loads the configuration file of the corresponding sub-application based on the configuration information in the menu management information, loads the target file of the sub-application based on the configuration file, and executes it, including:

[0079] When a user accesses a menu, the main application loads the sub-application's configuration file based on the configuration information in the menu management information;

[0080] Determine if there are dependency configurations in the configuration file. If so, load the dependent sub-application. Load the dependent sub-application and attach the components and methods thrown by the dependent sub-application to the properties of the window object that correspond one-to-one with the unique identifier of the sub-application, so that the sub-application can use the methods and components thrown by the dependent sub-application through the special identifier.

[0081] Load the target file according to the target file path in the configuration file;

[0082] Based on the configuration information in the menu management information, obtain the name of the component corresponding to the menu, obtain the reference of the component with the corresponding name thrown in the sub-application interface, render the component in the main application, and complete the business function.

[0083] In this embodiment, the existing system code is automatically used as the main application code. When a user accesses the menu, the main application code first loads the configuration file of the sub-application through the menu management configuration information, checks whether the configuration depends on other sub-applications, and if so, loads the dependent sub-application first. Then, it loads the sub-application code according to the target file path in the configuration file, executes and obtains the Vue component reference configured in the menu management, and renders the component to implement the business function.

[0084] In this embodiment, public components and public methods are mounted on the window. They can be mounted under different special naming attributes of the window according to their categories. Public components can also be registered as global components.

[0085] If a child application depends on other child applications, the main application loads the dependent child application first, and then attaches the components and methods thrown by the dependent child application to the window object, to the properties that correspond one-to-one with the unique identifier of the child application.

[0086] Example 5

[0087] This embodiment, based on the above embodiments, adds a method for referencing newly developed public components and public methods to meet new project requirements; including: developing the new public component or public method as a public library sub-application; the public library sub-application then exports a reference to the public component or public method;

[0088] When other sub-applications need to use new public components or public methods, they need to configure a dependency on the public library sub-application in this sub-application and mount the methods thrown by the dependent sub-applications to the window object.

[0089] For newly developed public components and methods, this can be achieved by developing a public library sub-application. The method provided in this embodiment develops a public component or method as a public library sub-application. This sub-application throws a reference to the public component or method. When other sub-applications need to use this public code, they must configure a dependency on this public library sub-application within this sub-application. When the main application loads the sub-application code, it first checks the configuration. If it finds a dependency on other sub-applications, it loads the dependent sub-application first and attaches the method thrown by the dependent sub-application to the window object, allowing the sub-applications to use the dependency.

[0090] In a specific embodiment, a scaffolding program can be developed to integrate the configuration files, sample code, and main application deployment package of the sub-application into a template. Developers install the scaffolding program on their local operating system and use the commands provided by the scaffolding program to generate a template-based basic source code for the sub-application locally, and then develop based on this.

[0091] The following is in conjunction with the instruction manual. Figure 3 This section details the operational process for developers when transforming a system architecture based on Vue to obtain a micro-frontend system architecture.

[0092] Configure menu management information. The main application loads and renders the sub-applications and their dependencies based on the sub-application configuration information in the menu management information.

[0093] In the menu management configuration, the configuration information format for sub-applications is: fixed prefix / Vue component name / sub-application configuration file path. Example: $apps / SomeMenu / AppPath. The fixed prefix identifies the properties that need to be set. Existing system code automatically becomes the main application code. When a user accesses the menu, the main application loads AppPath / config.json as the sub-application's configuration file, checks if the configuration file depends on other sub-applications, and if so, loads the dependent sub-application and attaches the code references thrown by that application to the window object. Then, based on the target file path in the sub-application's configuration file, it loads and executes the sub-application's target file, retrieves the component corresponding to the Vue component name in the menu management configuration, and renders that component in the main application to complete the business functionality.

[0094] (2) Existing system public components are registered as global Vue components. Public components and public methods are mounted under different special window naming attributes according to their categories. The purpose of the special identifier is to separate the references in the source code to the future self-developed application from the references from the local development directory (i.e., the development directory of this sub-application), or in other words, to separate them from the references of this sub-application;

[0095] For example, all code under the `src / utils` path in the existing system source code is mounted under `window.__MICROAPP_src_utils__`. Sub-applications can use specific methods via `import SomeMethod from '@main / utils / SomeMethod'`. Here, `@main / ` is a special identifier used to indicate that all methods or components starting with this name originate from the main application. If a sub-application depends on other sub-applications, the main application loads the dependent sub-application first and mounts the components and methods thrown by the dependent sub-application onto the properties of the `window` object that correspond one-to-one with the unique identifier of the sub-application. For example, the sub-application path `AppPath` can be used as the unique identifier of the sub-application. Sub-application dependencies are mounted on `window.__MICROAPP_deps_AppPath__`, and sub-applications can use dependent methods via `import SomeMethod from '@deps / DepsName / SomeMethod'`, where `DepsName` is the dependency identifier in the dependency configuration.

[0096] (3) Write a sub-application packaging configuration file, pointing the specially identified references in the sub-application source code to the public methods mounted on the window object in the main application. The sub-application is packaged to generate target files, and the configuration file includes the sub-application dependency configuration and the target file path.

[0097] The child application directly uses the globally registered components from the main application. The build configuration file needs to point the child application's Vue reference to `window.__MICROAPP_vue__`, and simultaneously mount the main application's Vue reference to `window.__MICROAPP_vue__`, so that the child application and the main application use the same Vue reference.

[0098] Sub-applications use public methods of the main application through special identifiers, such as: `import SomeMethod from '@main / utils / SomeMethod'`. The packaging configuration file needs to point all references starting with `@main / utils / ` to the `window.__MICROAPP_src_utils__` object. Specifically, the reference to `@main / utils / SomeMethod` corresponds to reading `window.__MICROAPP_src_utils__.SomeMethod`.

[0099] Dependency registration for sub-applications is configured by setting the `deps` property to an array in the sub-application's `config.json` file. Each array element represents a dependency, and each array element includes two attributes: `name` and `path`.

[0100] `name` is the name of the dependency, used to identify it. The main application will attach the methods thrown by this dependency to a property named `window.__MICROAPP_deps_AppPath__` so that child applications can use the dependency by name. `path` is the path to the target file of this dependency, which the main application uses to load the dependency.

[0101] Sub-applications use methods thrown by other dependent sub-applications through special identifiers, such as: `import SomeMethod from '@deps / DepsName / SomeMethod'`. The packaging configuration file needs to point all references starting with `@deps / ` to the `window.__MICROAPP_deps_AppPath__` object. `DepsName` is the name attribute name in the dependency configuration. `AppPath` is the path to the sub-application, used here as a unique identifier for the sub-application; including `AppPath` prevents sub-applications from referencing dependencies with the same name in other sub-applications. Specifically, the reference to `@deps / DepsName / SomeMethod` corresponds to reading `window.__MICROAPP_deps_AppPath__.DepsName.SomeMethod`.

[0102] A scaffolding program is developed, which integrates the configuration files, sample code, and main application deployment package of sub-applications into a template. Developers install the scaffolding program on their local operating system and use the commands provided by the program to generate a template-based basic source code for the sub-application locally, which serves as the foundation for further development.

[0103] The scaffolding program creates a command-line command in the operating system, for example, named `cli`. When a developer executes `clicreatedemo`, the command creates a `demo` folder in the current directory. The command line will then prompt for the path to the sub-application and the path to the target file. After the developer fills in the information, the command will copy the basic source code, consisting of sample code and the main application deployment package, to the `demo` folder. Simultaneously, a `config.json` configuration file will be generated in the `demo` folder. This configuration file contains the information just prompted by the command, including the sub-application path (`path`) and the target file path (`main`). The local packaging tool will read the configuration file information, name the packaged target files according to the target file names in the configuration file, and place the target files into the corresponding directories using the sub-application path as the directory structure. Because the basic source code also includes the main application deployment package, the sub-application can be debugged in the real main application environment in debug mode and can use the components and methods provided by the main application.

[0104] Example 6

[0105] like Figure 1 As shown, this embodiment provides a micro-frontend system obtained by modifying the system architecture based on Vue, including: a main application and sub-applications;

[0106] The main application is a Vue-based management system; the main application includes a menu registration module and a loading module;

[0107] The menu registration module is used to: use the Vue-based system as the main application; write the source code of the sub-application, and expose references to the corresponding components of the menu in the sub-application interface; write the packaging configuration file of the sub-application, pointing the specially identified references in the source code to the public components or public methods already mounted on the window object in the main application; point the references to the Vue framework in the source code to the Vue framework references mounted on the window object in the main application; write the configuration file of the sub-application, which includes the target file path; package the sub-application to obtain the target file of the sub-application based on the sub-application configuration file and the packaging configuration file; register the menu, determine the sub-application to which the menu belongs; and configure menu management information.

[0108] The loading module is used during the code execution phase to load the configuration file of the sub-application corresponding to the menu according to the configuration information in the menu management information, and to load and execute the target file of the sub-application according to the configuration file.

[0109] During the code execution phase, the loading module loads the configuration files of the corresponding sub-applications based on the configuration information in the menu management information. It then loads and executes the target files of the sub-applications based on the configuration files, including:

[0110] When a user accesses a menu, a configuration file is loaded based on the menu management information.

[0111] The main application loads the target file of the sub-application based on the sub-application's configuration file;

[0112] Based on the configuration information in the menu management information, obtain the name of the component corresponding to the menu, obtain the reference of the component with the corresponding name thrown in the sub-application interface, render the component in the main application, and complete the business function.

[0113] Example 7

[0114] Based on Embodiment 6, in the system provided in this embodiment, the configuration file also includes the dependency information of the sub-application. The method for configuring the dependency is to configure the name identifier of the sub-application that the sub-application depends on and the target file path of the dependent sub-application.

[0115] Furthermore, during the code execution phase, the loading module loads the configuration files of the corresponding sub-applications based on the configuration information in the menu management information, loads the target files of the sub-applications according to the configuration files, and executes them, including:

[0116] When a user accesses a menu, a configuration file is loaded based on the menu management information.

[0117] The configuration file determines whether a sub-application depends on other sub-applications. If it depends on other sub-applications, the dependent sub-application is loaded, and the components and methods thrown by the dependent sub-application are mounted on the properties of the window object that correspond one-to-one with the unique identifier of the sub-application, so that the sub-application can use the methods and components thrown by the dependent sub-applications through the special identifier.

[0118] The main application loads the target file of the sub-application based on the sub-application's configuration file;

[0119] Based on the configuration information in the menu management information, obtain the name of the component corresponding to the menu, obtain the reference of the component with the corresponding name thrown in the sub-application interface, render the component in the main application, and complete the business function.

[0120] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0121] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart... Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0122] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0123] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0124] The embodiments of the present invention have been described above with reference to the accompanying drawings. However, the present invention is not limited to the specific embodiments described above. The specific embodiments described above are merely illustrative and not restrictive. Those skilled in the art can make many other forms under the guidance of the present invention without departing from the spirit and scope of the claims. All of these forms are within the protection scope of the present invention.

Claims

1. A method for transforming a Vue-based system architecture into a micro-frontend architecture, characterized by: include: Use the Vue-based system as the main application; Write the source code for the sub-application and throw a reference to the menu component in the sub-application interface; Write the packaging configuration file for the sub-application, pointing the specially identified references in the source code to the public components or public methods already mounted on the window object in the main application; pointing the references to the Vue framework in the source code to the Vue framework references mounted on the window object in the main application; write the configuration file for the sub-application, which includes the target file path; and package the sub-application to obtain the target file based on the configuration file and the packaging configuration file. Register the menu and determine the sub-application to which the menu belongs; Configure menu management information so that during the code execution phase, the main application loads the configuration file of the corresponding sub-application based on the configuration information in the menu management information, loads the target file of the sub-application based on the configuration file, and executes it. The configuration file also includes the dependency information of the sub-application. The method for configuring dependencies is as follows: configure the identifier of the dependent sub-application; if the dependent sub-application does not depend on other sub-applications, configure the target file path of the dependent sub-application; if the dependent sub-application has already configured its own dependencies in its configuration file, configure the configuration file path of the dependent sub-application, so that the sub-application can load the dependent sub-application according to the identifier of the dependent sub-application and the target file path or configuration file path of the dependent sub-application. During the code execution phase, the main application loads the configuration files of the corresponding sub-applications based on the configuration information in the menu management information, loads the target files of the sub-applications according to the configuration files, and executes them, including: When a user accesses a menu, the configuration file of the corresponding sub-application is loaded based on the menu management information. The main application loads the target file of the sub-application based on the sub-application's configuration file; Based on the configuration information in the menu management information, obtain the name of the component corresponding to the menu, obtain the reference of the component with the corresponding name thrown in the sub-application interface, render the component in the main application, and complete the business function. During the code execution phase, the main application loads the configuration files of the corresponding sub-applications based on the configuration information in the menu management information, loads the target files of the sub-applications according to the configuration files, and executes them, including: When a user accesses a menu, the configuration file of the sub-application is loaded based on the menu management information; The configuration file determines whether a sub-application depends on other sub-applications. If it depends on other sub-applications, the dependent sub-application is loaded, and the components and methods thrown by the dependent sub-application's API are mounted on the properties of the window object that correspond one-to-one with the unique identifier of the sub-application, so that the sub-application can use the methods and components thrown by the dependent sub-application's API through a special identifier. The main application loads the target files of the sub-application based on the sub-application's configuration file; Based on the configuration information in the menu management information, obtain the name of the component corresponding to the menu, obtain the reference of the component with the corresponding name thrown in the sub-application interface, render the component in the main application, and complete the business function. The method further includes: developing a new public component or public method as a public library sub-application; the program interface of the public library sub-application exposes a reference to the public component or public method; When other sub-applications need to use new public components or public methods, they need to configure a dependency on that public library sub-application in this sub-application.

2. The method for transforming a Vue-based system architecture into a micro-frontend architecture as described in claim 1, characterized in that, Use the scaffolding tool to quickly generate the basic source code of sub-applications, including the sub-application configuration file, the sub-application packaging configuration file, the sub-application source code, and the main application deployment package; when debugging the sub-application, run the main application deployment package, create a menu of sub-applications to be debugged, and debug the sub-application source code.

3. A micro-frontend system obtained by modifying the system architecture based on Vue, characterized in that... Constructed based on the method of any one of claims 1 to 2, comprising: The main application and sub-applications, wherein the main application includes a menu registration module and a loading module; The menu registration module is used to: use the Vue-based system as the main application; write the source code of the sub-application, and expose references to the corresponding components of the menu in the sub-application interface; write the packaging configuration file of the sub-application, pointing the specially identified references in the source code to the public components or public methods already mounted on the window object in the main application; point the references to the Vue framework in the source code to the Vue framework references mounted on the window object in the main application; write the configuration file of the sub-application, which includes the target file path; package the sub-application to obtain the target file of the sub-application based on the sub-application configuration file and the packaging configuration file; register the menu, determine the sub-application to which the menu belongs; and configure menu management information. The loading module is used during the code execution phase to load the configuration file of the sub-application corresponding to the menu according to the configuration information in the menu management information, and to load and execute the target file of the sub-application according to the configuration file.

4. The micro-frontend system obtained by modifying the system architecture based on Vue as described in claim 3, characterized in that, During the code execution phase, the loading module loads the configuration files of the corresponding sub-applications based on the configuration information in the menu management information. It then loads and executes the target files of the sub-applications based on the configuration files, including: When a user accesses a menu, a configuration file is loaded based on the menu management information. The main application loads the target file of the sub-application based on the sub-application's configuration file; Based on the configuration information in the menu management information, obtain the name of the component corresponding to the menu, obtain the reference of the component with the corresponding name thrown in the sub-application interface, render the component in the main application, and complete the business function.

5. The micro-frontend system obtained by modifying the system architecture based on Vue as described in claim 3, characterized in that, The configuration file also includes the dependency information of the sub-application. The method for configuring dependencies is as follows: configure the identifier of the dependent sub-application; if the dependent sub-application does not depend on other sub-applications, configure the target file path of the dependent sub-application; if the dependent sub-application has already configured its own dependencies in its configuration file, configure the configuration file path of the dependent sub-application, so that the sub-application can load the dependent sub-application according to the identifier of the dependent sub-application and the target file path or configuration file path of the dependent sub-application.

6. The micro-frontend system obtained by modifying the system architecture based on Vue as described in claim 3, characterized in that, During the code execution phase, the loading module loads the configuration files of the corresponding sub-applications based on the configuration information in the menu management information. It then loads and executes the target files of the sub-applications based on the configuration files, including: When a user accesses a menu, the configuration file of the sub-application is loaded based on the menu management information; The configuration file determines whether a sub-application depends on other sub-applications. If it depends on other sub-applications, the dependent sub-application is loaded, and the components and methods thrown by the dependent sub-application's API are mounted on the properties of the window object that correspond one-to-one with the sub-application's unique identifier, so that the sub-application can use the methods and components thrown by the dependent sub-applications through the special identifier. The main application loads the target file of the sub-application based on the sub-application's configuration file; Based on the configuration information in the menu management information, obtain the name of the component corresponding to the menu, obtain the reference of the component with the corresponding name thrown in the sub-application interface, render the component in the main application, and complete the business function.

Images