Vue builds micro front end

Category : tool Views : one thousand one hundred and thirty Comments : one Posted on : 2020-09-11

design scheme

The scheme is implemented by using webpack agent. Nginx agent can be used in production environment to achieve the purpose of micro front end.

Specific implementation

Sub project
Vue instances of child and parent projects are shared with index. HTML, so HTML files and vues are no longer needed. The sub project is mainly to mount its own route to the parent project. Since both the parent and child projects are in the same Vue instance, we only need to mount the route of the child project to the Vue instance, and the parent project can obtain the route of the child project and mount it to its own route. Here, the routing of the subproject 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 package file main.js: /src/main.js

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

Here, mount the route just defined to vue.sharerouter, and you can read the route of child project on Vue of parent project.
Then go to the webpack configuration to modify the package exit address, host and port.
Webpack configuration file : wepack.config.js

 module.exports = { mode: "development", Entry: ". / SRC / main. JS", / / entry file output: { Publicpath: '/ chilrenproject /', / / packing exit path File name: "main. JS" / / package exit file name }, externals: { 'Vue':'vue '/ / set Vue not to be packaged, and the parent project uses CDN to introduce 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 }, }

You 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 of all, to share Vue instances with subprojects, we can't package Vue here. I used CDN to introduce Vue. Then it is how to establish the communication between parent and child projects. Here I use the webpack plug-in insert-script-webpack-plugin , insert the child project as a module into the HTML of the parent project, so that the parent-child project can communicate. Of course, webpack still needs to be proxy, otherwise the package file of the child 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 sub project }), ], externals: { 'Vue':'vue '/ / Vue is not packaged, so that the parent and child projects are in the same Vue instance }, devServer: { contentBase: false, hot: true, host: "127.0.0.1", compress: true, port: 8088, inline: true, proxy: { ...PROXY }, }, }

Here's the webpack request /chilrenProject/main.js And then he was represented http://127.0.0.1 : 8089 / chilrenproject / main.js. In this way, the child project is inserted into the parent project. It is not finished. Next, the route of the child project is retrieved and loaded 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 routing of the child 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 did not introduce store here, because the store is mounted on the Vue instance, so the store can be shared by parent-child projects.
This is the end of the project. You can run the parent project to see if you can access the route of the child project.

Posted by : lyhq Tags : There is no label set for this article

All original articles adopt Creative Commons Attribution - noncommercial use 4.0 international license agreement Permission.
You are free to reprint and modify, but please note the source of the article and can not be used for commercial purposes.
Part of the content of this site is collected on the Internet. If there is any infringement or improper content, please contact us to delete it. Please understand!

Vue builds micro front end

Just one comment

Add a new comment