“This is the first day of my participation in the Gwen Challenge in November. See details of the event: The last Gwen Challenge in 2021”.

For large projects (product cycle time is long, the number of iterations, dozens of hundreds of page components, etc.) the framework of migration, such as vue2 to vue3 damage type of upgrade, time and manpower cost is very high, especially business development time tight task, often can’t have enough time (weeks or months) to a one-off upgrade all modules. While developing new pages with the old technology stack, you will also tread holes in the new technology stack. The first two big experiences must not be very pleasant. So the question is: can a project use both frameworks at the same time, develop new requirements using a new technology stack, and have time to go back and migrate old modules for smooth upgrades and seamless integration?

At this point, the microfront-end architecture provides a direction for such migration issues. Taking the official website as an example, let’s see how to build a demo and make an effective attempt to land in the actual project.

  • Main application construction:

For example, the main application stack is not limited. Install YARN Add Qiankun and connect it to main.js as the official example

registerMicroApps ([

{name: 'vueApp',

entry:'http://localhost:3001',

container: '#container',

ActiveRule :'/app-vue' // Subapplication route

},

.

])

Configure sub-application routing, start() to start qiankun

  • Access sub-applications:

First, make a copy of the Vue2 project under development for transformation. According to the example on the official website, bootstrap, mount, unmount,render and other life cycle functions are added to main.js. Then, the packaging configuration of Webpack needs to be modified. Vue cli is used, so modify vue.config.js configureWebpack and so on:

const { name } = require('./package'); // Name must be the same as the name in the primary application route... {devServer: {headers: {' access-Control-allow-origin ': '*', }, }, } configureWebpack: { output: { library: `${name}-[name]`, libraryTarget: 'umd', jsonpFunction: `webpackJsonp_${name}`, } }Copy the code

Because the project itself loaded many third party dependencies, so the cross-domain error made the access failed, this step needs to be further resolved. Move to a one-page project built with Vue3 + Vite.

  • Step 3 vITE project construction:

Error: Cannot use import Statemebnt outside a module SyntaxError Cannot use import Statemebnt outside a module

From the issueThe comments sectionThe reason is that Qiankun executes child application JS files through Eval, which currently does not support native ES6. Import /export in Vite requires Babel escape to be loaded correctly. And found outThe plug-inVite-plugin-qiankun successfully loaded the sub-application after the project was reformed according to the example given by the author.

  • Conclusion:

The production project is directly connected to the main application base as a sub-application. It is difficult to solve the cross-domain problem of third-party dependence. However, there is no problem with the aggregation of simple projects. The micro front-end architecture can be used to aggregate a number of scattered small projects to achieve unified entry, unified login and other functions.

Code details need to be worked out.