Vue builds micro front-end

Category: Tools Views : 6319 Comments : 1 Posted on : 2020-09-11

design scheme

This solution is implemented by using webpack proxy. In the production environment, nginx proxy can be used to achieve the purpose of micro front-end.

Specific implementation

Subproject
The Vue instances of child projects and parent projects are shared with index.html, so html files and vues are no longer needed. Subprojects are mainly used to mount their own routes to the parent project. Because the parent and child projects are all in the same Vue instance, we just need to mount the routes of the child projects to the Vue instance, and the parent project can obtain the routes of the child projects and mount them to its own routes. Here, the routing of sub items is an array, not a routing instance of Vue.

Routing file ： /src/router/index.js

 export default [ { path: "/a", component: () => import("@/views/login/index.vue") }, { path: "/b", component: () => import("@/views/home/index.vue") }, ];

Here we mainly define the routing address and component address. Next, we will mount the route to the Vue instance
Main packaging file main.js: /src/main.js

 import Vue from "vue"; import router from './router' const shareRouter = (Vue.__shareRouter__ = Vue.__shareRouter__ || {}) shareRouter["chilrenRouter"] = router

Here, the route just defined is attached to Vue.shareRouter, and the route of the child project can be read on the Vue of the parent project.
Then go to the webpack configuration to modify the packaging exit address, host and port.
Webpack configuration file : wepack.config.js

 module.exports = { mode: "development", entry: "./src/main.js", //Entry file output: { publicPath: '/chilrenProject/', //Packaging exit path Filename: "main. js"//Package exit file name }, externals: { 'vue': 'Vue'//Set Vue not to package. The parent project uses cdn to import vue, so that the parent and child projects are in the same instance }, devServer: { contentBase: false, hot: true, host: "127.0.0.1", compress: true, port: 8089, inline: true }, }

Here we can see that the running address of the subproject is http://127.0.0.1 : 8089, and then you can run the subproject.

Parent Project
First, we need to share Vue instances with subprojects. We can't package Vue here. I introduced Vue using CDN here. Then how to establish the communication between parent and child projects? Here I use the webpack plug-in insert-script-webpack-plugin As a module, the sub project is inserted into the html of the parent project, so that the parent and child projects can communicate. Of course, the webpack still needs to be proxied, otherwise the package file of the sub project cannot be found.

Webpack configuration file : wepack.config.js

 const path = require('path'); const VueLoaderPlugin = require("vue-loader/lib/plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const InsertScriptWebpackPlugin  = require('insert-script-webpack-plugin'); const PROXY = { '/chilrenProject/': { target: ' http://127.0.0.1:8089/ ' }, } module.exports = { mode: "development", entry: "./src/main.js", output: { path: path.resolve(__dirname, 'dist'), filename: "index.js" }, plugins: [ new VueLoaderPlugin(), new HtmlWebpackPlugin( { template: path.resolve(__dirname, "index.html") } ), new InsertScriptWebpackPlugin({ Paths: ['/chilrenProject/main. js']//Insert subproject }), ], externals: { 'vue': 'Vue'//vue does not package, in order to make the parent and child projects in the same Vue instance }, devServer: { contentBase: false, hot: true, host: "127.0.0.1", compress: true, port: 8088, inline: true, proxy: { ...PROXY }, }, }

Here webpack requests /chilrenProject/main.js , and then was delegated to http://127.0.0.1 :8089/chilrenProject/main.js， In this way, the sub project is inserted into the parent project. The next step is to get the route of the sub project and load it into the parent project.
Routing file ： /src/router/index.js

 import Vue from "vue"; import Router from "vue-router"; Vue.use(Router); const constRouter = [ { path: "/login", component: () => import("@/views/login/index.vue") }, { path: "/", component: () => import("@/views/home/index.vue") }, ]; const arr = Vue.__shareRouter__.chilrenRouter.concat(constRouter) export default new Router({ mode: "history", routes: constRouter });

Here, the route of the sub project is connected to the parent project. Of course, the project is relatively simple. If the routing logic is complex, the algorithm has to come by itself.
I didn't introduce the store here, because the store is mounted on the Vue instance, so the store can be shared by parent and child projects.
This is the end. You can run the parent project to see if you can access the routing of the child project.

Posted by : lyhq Tags: No tag is set in this article

All original articles adopt Creative Commons Attribution - Noncommercial Use 4.0 International License Agreement Licensing.
You can reprint and modify freely, but please note the source of the article and do not use it for commercial purposes.
Part of the content of this website is collected on the Internet. If there is any infringing content or improper content, please contact us to delete it. Please understand!

Vue builds micro front-end

Only one comment

Add a new comment