Vue2 and Vue3 project fusion method

Abstract

The invention discloses a Vue2 and Vue3 project fusion method, which comprises the following steps of: taking an original Vue2 project as a main application, introducing a micro-front-end framework into the main application, and adding a micro-application component route into a main application route file; constructing an independent project based on a Vite construction tool and a Vue3 framework as a sub-application; and the main application matches and loads the sub-applications according to the routing rule, and the sub-applications are integrated into the main application by using the micro-front-end architecture. On the premise that Vue2 codes do not need to be modified on a large scale, on-demand integration and smooth transition of Vue3 new characteristics are achieved, and an efficient solution is provided for progressive upgrading of stock projects.

Description

Technical Field

[0001] This invention belongs to the field of Javascript and relates to a method for integrating Vue2 and Vue3 projects. Background Technology

[0002] With the iteration of front-end technologies, the evolution of Vue.js versions has significantly impacted the developer ecosystem: Vue2 ceased official maintenance in December 2023, while Vue3, since its release, has achieved significant performance optimizations through incompatible architectural refactoring (such as reactive systems and composable APIs), and has become the core direction of framework development. Currently, many existing projects based on Vue2 are difficult to upgrade directly due to incompatibility differences in syntax specifications, operating mechanisms, etc., and high migration costs; existing compatibility solutions mostly rely on intrusive modifications (such as adapter layer API overriding and dual-version logic maintenance), leading to increased code complexity and maintenance risks.

[0003] Currently available solutions for integrating Vue2 and Vue3 mainly include: Option 1: Install different versions of Vue using different repositories or branches. By creating different Git repositories or branches and installing different versions of Vue, project code for different environments can be built, and the same project can maintain two versions of project code.

[0004] However, maintaining two sets of code for the same project not only results in high maintenance costs, but also increases the size of the compiled code.

[0005] Option 2: Use @vue / compact Install @vue / compact in your Vue2 project, modify the Vue2 project code to adapt it to the Vue3 API and dependencies, migrate a library to adapt to Vue3, and complete a comprehensive upgrade of the original Vue2 project code, so that subsequent development can use Vue3.

[0006] However, upgrading an existing project involves a huge amount of code changes, and it cannot be guaranteed that all dependencies of the original version will be compatible, resulting in high upgrade costs.

[0007] Option 3: Use vue-demi Install vue-demi, modify the original code, export all dependencies from vue-demi, and export Vue3 properties imported by newly developed modules from vue-demi as well. vue-demi can automatically identify the corresponding Vue runtime environment based on the current client's runtime environment, so you only need to maintain one set of code to adapt to both versions.

[0008] This solution eliminates the need to maintain two sets of code, but the customer's runtime environment is either Vue2 or Vue3, so only one can be chosen, rather than both. Summary of the Invention

[0009] The purpose of this invention is to overcome the shortcomings of the prior art and provide a method for integrating Vue2 and Vue3 projects. This method enables the on-demand integration and smooth transition of new Vue3 features without requiring large-scale modifications to the Vue2 code, providing an efficient solution for the gradual upgrade of existing projects.

[0010] To achieve the above objectives, the present invention employs the following technical solution: A method for integrating Vue2 and Vue3 projects includes the following steps: Use the original Vue2 project as the main application, introduce the micro-frontend framework into the main application, and add micro-application component routes to the main application's routing file. Build a standalone project based on the Vite build tool and the Vue3 framework as a sub-application; The main application matches and loads the sub-applications according to the routing rules, and integrates the sub-applications into the main application using a micro-frontend architecture.

[0011] Optionally, using the original Vue2 project as the main application includes the following steps: Create a micro-app sub-application component in the main application view layer and allocate rendering space for the sub-application; The micro-frontend framework uses lifecycle hook functions to control the mounting and unmounting states of sub-applications.

[0012] Optionally, controlling the sub-application state through lifecycle hook functions includes the following steps: DOM manipulation and resource caching are performed during the beforeMount phase; The `mounted` phase completes the rendering of the sub-application and initiates data communication; the `unMount` phase cleans up the resources of the sub-application.

[0013] Optionally, building a standalone project as a sub-application using the Vite build tool and the Vue3 framework includes the following steps: Modify the sub-application configuration file to determine the sub-application's runtime environment through environment variables; If the runtime environment is a development environment, set the basename parameter to adapt to the main application's routing rules; Modify the ID of the child application container element to ensure that the child application elements are isolated.

[0014] Optionally, if the operating environment is a production environment, keep the settings consistent with the independent deployment, use the nginx proxy to set the access address of the main application and the access address of the sub-application, and deploy according to the hierarchy of main application, basename, and sub-application.

[0015] Optionally, if the runtime environment is a development environment, set the main application routing mode to history mode and the sub-application routing mode to hash mode; set the URL parameter of the micro-app sub-application component to the sub-application's local launch address concatenated with the basename.

[0016] Optionally, the main application may match and load the sub-application according to routing rules, including the following steps: After the main application matches the routing rules of the sub-application, it requests the HTML resources of the sub-application. Perform DOM parsing on HTML resources, initiate a depth-first DOM traversal recursion, and determine the resource type for each node.

[0017] Optionally, the step of determining the resource type for each node includes: Intercept JS and CSS resources to prevent pollution of the main application environment; For JS resources, if it is a remote script, a network request is initiated to obtain the script content and inline it; if it is an inline script, the script content is extracted. For CSS resources, if it is a remote style (Link tag), the resource is obtained through a network request; if it is a Style tag, the CSS content is extracted.

[0018] Optionally, isolation procedures may also be included: Extract the CSS content obtained during the DOM parsing phase, encapsulate it as style content through the ShadowDOM proxy mechanism, and insert it into the micro-application container to achieve style isolation; Create a JS sandbox and use a proxy mechanism to proxy the global window object and document object, thus establishing an isolated environment between the main application and sub-applications.

[0019] Optionally, it also includes master-slave application communication steps: In the micro-frontend framework, assign a communication object EventCenterForMicroApp to the sub-application; Sub-applications obtain data from the main application through a communication object or bind listener functions to listen for data from the main application; Send data to the main application using the dispatch method of the communication object.

[0020] Compared with the prior art, the present invention has the following beneficial effects: This invention requires no code-level upgrades or compatibility modifications to existing Vue2 projects. It simply encapsulates the original Vue2 project as the main application, and builds a separate new Vue3 project as a sub-application. Utilizing a micro-frontend architecture (MicroApp), it achieves seamless integration of the two projects through the main application's routing and sandboxing mechanisms. This solution avoids the damage to existing code caused by traditional intrusive modifications, eliminates the risk of conflicts between the two versions through the decoupling design of the micro-frontend, and supports the on-demand introduction of new Vue3 features (such as composable APIs and SFC single-file component optimizations), providing a low-risk, high-efficiency, and gradual upgrade path for existing Vue2 projects. Attached Figure Description

[0021] Figure 1 This is a schematic diagram illustrating the calling method of the master and child applications of this invention. Detailed Implementation

[0022] Embodiments of the present invention are described in detail below, examples of which are shown in the accompanying drawings, wherein the same or similar reference numerals denote the same or similar elements or elements having the same or similar functions throughout. The embodiments described below with reference to the accompanying drawings are exemplary and are only used to explain the present invention, and should not be construed as limiting the present invention.

[0023] The following disclosure provides many different embodiments or examples for implementing various structures of the invention. To simplify the disclosure, specific examples of components and arrangements are described below. These are merely examples and are not intended to limit the invention. Furthermore, reference numerals and / or letters may be repeated in different examples; such repetition is for simplification and clarity and does not in itself indicate a relationship between the various embodiments and / or arrangements discussed. In addition, examples of various specific processes and materials are provided in this invention, but those skilled in the art will recognize the application of other processes and / or the use of other materials.

[0024] This embodiment provides a non-intrusive method for integrating Vue2 and Vue3 projects based on a micro-frontend architecture. With a focus on balancing upgrade costs, reducing upgrade difficulty, and ensuring project performance, it addresses the issue from an architectural perspective, performing a systematic upgrade. The solution employs a non-intrusive approach to modify the main application while simultaneously building entirely new, independently running sub-applications. Compatibility design enables collaboration between the main and sub-applications, maximizing the preservation of each project's original characteristics while significantly reducing coupling between projects. The implementation path is detailed below using the ZOS basic platform V1.0 architecture upgrade scenario.

[0025] (I) Core logic of micro front-end architecture.

[0026] Micro-frontends are an architectural style that aims to break down frontend applications into multiple independent, reusable modules that can be developed, built, and deployed by separate teams. The core of micro-frontend architecture is building a collaborative model of "1 main application + N sub-applications," where sub-applications can run independently or seamlessly integrate with the main application within the micro-frontend environment. This architecture, through isolation and communication mechanisms, enables the coexistence of different technology stacks and application versions, providing a flexible path for upgrading existing projects.

[0027] (II) Current Status and Upgrade Needs of ZOS Basic Platform

[0028] ZOS is a low-code platform. The current front-end architecture is a Vue 2 project built on webpack 5. The technology stack uses Vue 2 + VueRouter 3 + Vuex 3 as the core framework, and Webpack 5 + Babel 7 + TypeScript as the build tools. To ensure compatibility between Vue 2 and TypeScript, third-party libraries such as vue-property-decorator and vue-class-component are used. Less is used for style processing, and ESLint + Prettier + Husky + lint-staged are used for code quality checks, formatting, and pre-commit validation. webpack-dev-server + hotmodulereplacement are used to implement API proxying and local hot updates. The platform currently includes data model design, form design, process design, view design, and multiple business applications built upon it. Over 20 basic components and 5 layout components have been developed, resulting in a large amount of code.

[0029] The existing architecture has obvious limitations: 1. The official Vue2 core framework ceased maintenance on December 31, 2023. The UI component library based on Vue2 used in the current project has defects, but due to the limitations of Vue2, it is impossible to fix or upgrade the UI component library. 2. The current Vue3 is the latest version, which is a complete overhaul of Vue2. Changes have been made to the global API, template directives, components, rendering functions, lifecycle, etc. It is currently impossible to upgrade it completely using tools. It requires modification of all existing source code, which is very costly. 3. The current project uses Webpack 5 as its build tool. The platform's functions are tightly coupled, and the platform and third-party applications cannot be separated. As the number of business applications increases, the code grows exponentially. Webpack's build speed is slow, resulting in low development efficiency. 4. The current platform's basic functions support limited business scenarios, making it difficult to meet users' extended needs such as custom pages.

[0030] Therefore, the upgrade goals are clearly defined as follows: introduce Vue3 and the Vite build tool, upgrade the view designer and view renderer to leverage the new features of Vue3 to improve development efficiency, and accelerate the construction speed of new modules through Vite—while ensuring compatibility with the original Vue2 project throughout the process to avoid intrusive modifications to existing code.

[0031] (III) Implementation details of the non-intrusive upgrade solution: 1. Layered architecture design.

[0032] Main Application: Use the existing Vue 2 project as the main micro-frontend application. Install `@micro-zoe / micro-app` and import it at the main application's entry point. Add routes for the micro-application components to the main application's `route.ts` file, and create the `micro-app` child application component in the main application's views, allocating space for the child application. Disable the micro-frontend's sandbox functionality using `disableSanbox`. The `handleCreate`, `handleBeforeMount`, `handleMount`, `handleUnmount`, and `handleError` lifecycle methods exposed by `@micro-zoe / micro-app` allow control over the child application's mounting and unmounting states within the main application. Sub-application: Build a separate project based on Vite+Vue3. Modify `vite.config.js` in the sub-application. Use `process.env.NODE_ENV` to determine the sub-application's runtime environment. If it's a development environment, set the basename to match the routing rules of the main application, allowing access to the sub-application from the main application. If it's a production environment, maintain consistency with the independent deployment settings, using nginx for the link to the main application. Modify the container element ID of the sub-application to ensure element isolation; modify the static resource request method of the sub-application to obtain resource links.

[0033] 2. Environment adaptation and communication mechanism.

[0034] Production environment adaptation: Deploy according to the hierarchy of main application / basename / sub-application, and use nginx proxy to set separate access addresses for the main application and sub-applications. After configuration, sub-applications can be accessed through their own entry point, or through the main application's entry point / basename / sub-application entry file route, thus achieving production environment compatibility deployment of the micro-frontend. Development environment adaptation: Set the URL of the micro-app sub-component to the local launch address of the sub-application + / micro-page / , set the basename of the sub-application to micro-page, set the routing mode of the main application to history, and set the routing mode of the sub-application to hash. Launch the main application and the sub-application at the same time. The sub-application can be accessed locally via the address of the main application + / # / micro-app / .

[0035] Communication between the main and child applications: Disabling the sandbox using `disableSandbox` disables communication functionality for the child application. By assigning a communication object `EventCenterForMicroApp` to the child application within the micro-app (e.g., `window.eventCenterForAppNameVite = new EventCenterForMicroApp('BaseMicroApp')`), the child application can directly access the main application's data via `window.eventCenterForAppNameVite.getData()`, or it can listen for data from the main application by binding a listener function. When the child application sends data to the main application, it uses `window.eventCenterForAppNameVite.dispatch({type:'data sent by the child application'})`, thus completing the data communication between the main and child applications.

[0036] 3. Isolation protection.

[0037] The solution ensures application stability through two major isolation mechanisms: JS Sandbox Isolation: Using the with sandbox mode, child applications obtain the actual window and document through window.rawWindow and window.rowDocument, creating an isolated environment between the main application and child applications.

[0038] Style isolation: Add a prefix to the style using the name attribute of the tag to limit the influence of the style of the sub-application to the current area.

[0039] This design breaks through the limitations of the technology stack, not only supporting the coexistence of the current Vue2 and Vue3, but also reserving room for expansion for the introduction of other frameworks and the implementation of application-level architecture separation.

[0040] like Figure 1 As shown, the calling method of the master and child applications is as follows: 1. Main application.

[0041] Through the base application, which is the main application (the original old project of Vue 2.0) <micro-app>The tag declares a sub-application and triggers the loading process of the sub-application (a new project in Vue 3.0). The main application only needs to focus on the route mapping (such as the / micro-page route), thereby defining the loading rules of the sub-application.

[0042] 2. HTML fetching and DOM recursive processing.

[0043] When the main application matches the routing rules of the sub-application, the sub-application starts loading and initiates the isolation process.

[0044] (1) FetchHTML and DOM parsing.

[0045] The sub-application requests its own HTML resources over the network. The framework performs DOM parsing on the HTML and initiates a depth-first recursive DOM traversal, determining each node to determine if it is a JS / Link / Style resource. (2) Resource type branch processing, intercepting dynamic and static resources.

[0046] For each node of the sub-application, conditional statements and branching logic are used to forcibly intercept all JS, CSS, and other resources, preventing direct contamination of the main application environment. For JS resources, remote scripts initiate network requests to retrieve JS content; inline scripts extract the script content, cache it, and then wait for sandbox isolation. For CSS resources, if a `Link` tag contains a remote style, it requests the resource via the network, caches it, and then isolates the user's style; otherwise, it skips the style request. For `Style` tags, the CSS content is directly extracted, cached, and used for style isolation.

[0047] 3. Style isolation and sandbox isolation.

[0048] Extract the CSS content cached during the DOM processing phase, repackage it into style content using the ShadowDOM proxy mechanism, and insert it. <micro-app>Inside the container. A JS sandbox is created, using ES6's proxy mechanism to proxy the global window and document objects, thus isolating the main and child applications.

[0049] 4. Lifecycle management.

[0050] Micro-apps decouple and coordinate the main and child applications through a lifecycle approach, allowing them to load, execute, and unload. `beforeMount`: Triggered after initial DOM processing and resource caching. The child application initializes during this stage without affecting the main application's rendering. `mounted`: Triggered after DOM rendering is complete, style isolation is in effect, and the JS sandbox is running stably. At this point, the child application has finished rendering, and the main and child applications can communicate.

[0051] 5. Uninstall and clean up.

[0052] When a child application is uninstalled from the main application, the uninstallation process is triggered. During the unMount lifecycle, the child application can clean up its own resources.

[0053] (iv) Core value of the solution.

[0054] Through this architecture upgrade solution, the ZOS platform achieved its upgrade goals, including "empowering new Vue3 features, accelerating Vite builds, and supporting user-defined pages," while minimizing the amount of modification required to the original project, thus reducing upgrade risks and costs. The loose coupling design between the master and child applications also provides flexibility for subsequent feature iterations and technology stack evolution, fully demonstrating the scientific and practical nature of the architecture upgrade.

[0055] This embodiment uses a micro-frontend architecture, with the original project as the main application and the new module as a sub-application. This approach ensures both independent operation and application compatibility and communication, thereby improving work efficiency and reducing maintenance costs.

[0056] The sequence numbers of the embodiments in this application are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0057] In the above embodiments of this application, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0058] In the several embodiments provided in this application, it should be understood that the disclosed technical content can be implemented in other ways. The device embodiments described above are merely illustrative; for example, the division of units can be a logical functional division, and in actual implementation, there may be other division methods. For instance, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the displayed or discussed mutual coupling, direct coupling, or communication connection may be through some interfaces; the indirect coupling or communication connection between units or modules may be electrical or other forms.

[0059] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0060] The above description is only a preferred embodiment of this application. It should be noted that for those skilled in the art, several improvements and modifications can be made without departing from the principle of this application, and these improvements and modifications should also be considered within the scope of protection of this application.

[0061] It should be understood that the above description is for illustrative purposes and not for limitation. Many embodiments and applications beyond the provided examples will be apparent to those skilled in the art upon reading the above description. Therefore, the scope of this patent should not be determined by reference to the above description, but rather by reference to the foregoing claims and the full scope of their equivalents. For purposes of completeness, all articles and references, including patent applications and publications, are incorporated herein by reference. The omission of any aspect of the subject matter disclosed herein in the foregoing claims is not intended as a waiver of that subject matter, nor should it be construed as an indication that the applicant has not considered that subject matter as part of the disclosed inventive subject matter.

Claims

1. A method for merging Vue2 and Vue3 projects, characterized in that, The process includes the following steps: Use the original Vue2 project as the main application, import the micro-frontend framework into the main application, and add micro-application component routes to the main application route file; Build an independent project based on the Vite build tool and Vue3 framework as a sub-application; The main application matches and loads the sub-application according to the routing rules, and integrates the sub-application into the main application using the micro-frontend architecture.

2. The method for Vue2 and Vue3 project fusion according to claim 1, characterized in that, The steps for using the original Vue2 project as the main application include: Create a micro-app sub-application component in the main application view layer, and assign a rendering space for the sub-application; Control the mounting and unmounting state of the sub-application through the lifecycle hook functions provided by the micro-frontend framework.

3. The method of merging Vue2 and Vue3 projects according to claim 2, wherein, The steps for controlling the sub-application state through the lifecycle hook function include: Perform DOM processing and resource caching in the beforeMount phase; Complete sub-application rendering and start data communication in the mounted phase; clean up sub-application resources in the unMount phase.

4. The method for Vue2 and Vue3 project fusion according to claim 1, characterized in that, The steps for building an independent project based on the Vite build tool and Vue3 framework as a sub-application include: Modify the sub-application configuration file to determine the sub-application running environment through environment variables; If the running environment is development, set the basename parameter to adapt to the main application routing rules; Modify the sub-application container element id to ensure sub-application element isolation.

5. The method of fusing Vue2 and Vue3 projects of claim 4, wherein, If the running environment is production, keep consistent with the independent deployment settings, use nginx proxy to set the main application access address and sub-application access address, and deploy according to the main application, basename, and sub-application hierarchy.

6. The method for Vue2 and Vue3 project fusion according to claim 4, characterized in that, If the running environment is development, set the main application routing mode to history mode, set the sub-application routing mode to hash mode; set the url parameter of the micro-app sub-application component to the local start address of the sub-application concatenated with the basename.

7. The method for Vue2 and Vue3 project fusion according to claim 1, characterized in that, The steps for the main application to match and load the sub-application according to the routing rules include: After the main application matches the sub-application routing rules, request the sub-application HTML resource; Perform DOM parsing on the HTML resource, start a depth-first DOM traversal recursion, and judge the resource type node by node.

8. The method of fusing Vue2 and Vue3 projects of claim 7, wherein, The steps for judging the resource type node by node include: Intercept JS resources and CSS resources to avoid polluting the main application environment; For JS resources, if it is a remote script, initiate a network request to get the script content and inline it, if it is an inline script, extract the script content; For CSS resources, if it is a remote style Link tag, get the resource through a network request, if it is a Style tag, extract the CSS content.

9. The method of fusing Vue2 and Vue3 projects of claim 8, wherein, It also includes the isolation processing steps: Extract the CSS content obtained in the DOM parsing stage, encapsulate it as style content through the ShadowDOM proxy mechanism, and insert it into the micro-application container to achieve style isolation; Create a JS sandbox, proxy the global window object and document object through the Proxy proxy mechanism, and establish an isolated environment for the main application and the sub-application.

10. The method for Vue2 and Vue3 project fusion according to claim 1, characterized in that, It also includes the main-sub-application communication steps: Assign a communication object EventCenterForMicroApp to the sub-application in the micro-frontend framework; The sub-application obtains the main application data or binds a listening function to listen to the main application data through a communication object. The sub-application sends data to the main application through a dispatch method of the communication object.

Images