Implementing micro front-end based on qiankun

qiankun

What is qiankun? qiankun is a micro front-end implementation library based on single-spa, which can help everyone build a production-ready micro front-end architecture system more simply and painlessly.

What is micro frontend

Micro front-end is a technical means and method strategy for multiple teams to jointly build modern web applications by publishing functions independently.

The micro front-end architecture has the following core values:

• Technology stack-independent.
  The main framework does not restrict the technology stack of access applications, and micro-applications have complete autonomy.
• Independent development and independent deployment:
  The micro-application warehouse is independent, and the front and back ends can be developed independently. After the deployment is completed, the main framework automatically completes synchronous updates.
• Incremental Upgrade
  When faced with various complex scenarios, it is usually difficult for us to do a full technology-stack upgrade or reconstruction of an existing system, and micro-frontend is a very good means of implementing incremental reconstruction and Strategy
• When running independently,
  the state of each micro application is isolated and the runtime state is not shared.

Application building

1. Add the following content to
   the main applicationmain.js

import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './Router'
import {
    
     registerMicroApps, start, setDefaultMountApp } from 'qiankun'

let app = null

function initVue() {
    
    
  app = createApp(App)
  app.use(router)
  app.mount('#app')
}

// function genActiveRule(routerPrefix) {
    
    
//   return location => location.pathname.startsWith(routerPrefix)
// }

initVue()

// 设置默认进入的子应用
setDefaultMountApp('#/app2')

// 在主应用中注册微应用
registerMicroApps([
  {
    
    
    name: 'apptwo', // 微应用的名称
    entry: '//localhost:8008', // 微应用的 entry 地址
    container: '#childMicro', // 微应用的容器节点
    activeRule: '#/app2', // 微应用的激活规则
  }
])

start()

Add the container node of the micro application in App.vue

2.
Modify the micro application main.jsas follows:

import {
    
     createApp } from 'vue'
import {
    
     createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import './public-path'

let app = null
let router = null

function initApp() {
    
    
  app = createApp(App)
  router = createRouter({
    
    
    history: createWebHistory(),
    routes: [
      {
    
    
        path: '/',
        component: App
      }
    ]
  })
  app.use(router)
  // index.html文件 <div id="apptwo"></div>
  app.mount(document.querySelector('#apptwo') ? '#apptwo' : '#app')
}
if (!window.__POWERED_BY_QIANKUN__) {
    
    
  initApp()
}

export async function bootstrap() {
    
    
  console.log('vue app bootstraped')
}

export async function mount(props) {
    
    
  console.log('props from main app', props)
  initApp()
}
export async function unmount() {
    
    
  app.unmount()
  app = null
  router = null
}

vue.config.jsAdd the following configuration in

const {
    
     name } = require('./package')

module.exports = {
    
    
  publicPath: './',
  outputDir: 'dist',
  devServer: {
    
    
    port: 8008,
    overlay: {
    
    
      warnings: true,
      errors: true
    },
    headers: {
    
    
      'Access-Control-Allow-Origin': '*',
    }
  },
  configureWebpack: {
    
    
    output: {
    
    
      // 把子应用打包成 umd 库格式
      library: `${
      
      name}-[name]`,
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${
      
      name}`,
    }
  }
}

Create a new pubulic-path.jsfile and add the following content

// https://webpack.docschina.org/guides/public-path/#on-the-fly

if (window.__POWERED_BY_QIANKUN__) {
    
    
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

Summarize

The above is the editor's process of using qiankun and two Vue projects to implement micro front-end. In addition, there are other implementation methods of micro front-end, such as routing distribution, micro applications, using iframe as a container, etc. You can learn about it by yourself.