Micro front-end: Use the qiankun framework to build Vue from 0-1 to form a micro-front-end project

Step one: Create a new project

Create a new main application and two sub-applications created using vue/cli

vue create main
vue create vue2-app-1
vue create vue2-app-2

Step 2: Install qiankun for all applications

yarn add qiankun

Step 3: Introduce qiankun into the main application

main.js in main project

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import {
    
     registerMicroApps, start } from "qiankun";

Vue.config.productionTip = false;

registerMicroApps([
  {
    
    
    name: "vue2 app 1", //子应用名称
    entry: "//localhost:10001", //子应用端口号
    container: "#v2-app-1", //子应用挂载的元素
    activeRule: "/v2-app-1", //子应用路径
  },
  {
    
    
    name: "vue2 app 2",
    entry: "//localhost:10002",
    container: "#v2-app-2",
    activeRule: "/v2-app-2",
  },
]);
// 启动 qiankun
start();

new Vue({
    
    
  router,
  render: h => h(App),
}).$mount("#app");

App.vue in main project

<template>
  <div id="app">
    <h1>主应用</h1>
    <nav>
      <router-link to="/v2-app-1">v2-app-1</router-link>
      |
      <router-link to="/v2-app-2">v2-app-2</router-link>
    </nav>

    <!-- 子应用占位 -->
    <div id="v2-app-1"></div>
    <div id="v2-app-2"></div>
  </div>
</template>

Step 4: Sub-application configuration

1. Add public-path.js in the src directory:

if (window.__POWERED_BY_QIANKUN__) {
    
    
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

2. The entry file main.js has been modified. In order to avoid conflicts between the root id #app and other DOMs, the search scope needs to be limited.

import "./public-path";
import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App.vue";
import routes from "./router";

Vue.config.productionTip = false;

let router = null;
let instance = null;
function render(props = {
     
     }) {
    
    
  const {
    
     container } = props;
  router = new VueRouter({
    
    
    base: window.__POWERED_BY_QIANKUN__ ? "/app-vue/" : "/",
    mode: "history",
    routes,
  });

  instance = new Vue({
    
    
    router,
    render: h => h(App),
  }).$mount(container ? container.querySelector("#app") : "#app");
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
    
    
  render();
}

export async function bootstrap() {
    
    
  console.log("[vue] vue app bootstraped");
}
export async function mount(props) {
    
    
  console.log("[vue] props from main framework", props);
  render(props);
}
export async function unmount() {
    
    
  instance.$destroy();
  instance.$el.innerHTML = "";
  instance = null;
  router = null;
}

3. Package configuration modification (vue.config.js):

const {
    
     name } = require("./package");
module.exports = {
    
    
  devServer: {
    
    
    headers: {
    
    
      "Access-Control-Allow-Origin": "*",
    },
  },
  configureWebpack: {
    
    
    output: {
    
    
      library: `${
      
      name}-[name]`,
      libraryTarget: "umd", // 把微应用打包成 umd 库格式
      jsonpFunction: `webpackJsonp_${
      
      name}`,
    },
  },
};

4. Export routes in router

src/router/index.js

export default routes;

5. Run sub-application

yarn serve

If an error is reported, downgrade vue/cli to version 4.

    "@vue/cli-plugin-babel": "~4.0.0",
    "@vue/cli-plugin-router": "~4.0.0",
    "@vue/cli-service": "~4.0.0",

Step 5: Launch the main application

main

yarn serve

in conclusion

Finally, a simple micro front end is configured, which can be controlled through the routing of the main application to display which sub-application
demo project address is displayed.