Source of demand

Recently, the company’s new product needs to reuse the project made by VUE and react. Our solution for the first event is definitely to use IFrame, but iframe has several pain points that cannot be solved: 1. The shell mask layer can only cover the parent level and cannot cover the full screen. 2. The communication between the primary application and sub-applications is cumbersome and needs to be implemented through postMessage. Recently micro services are very hot, we are also ready to practice on this product. After investigation, we decided to use Qiankun. The primary application is vUE + ANTD Vue, and the sub-application is vue + ANTD vue or React + ANTD. The routing mode of the primary and sub-applications is hash mode.

What is a micro front end

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

    The main framework does not limit the technology stack of access applications, and microapplications have full autonomy

    • Independent development and deployment

    The microapplication repository is independent, and the front and back ends can be independently developed. After deployment, the main framework can automatically complete synchronous update

    • The incremental upgrade

    In the face of a variety of complex scenarios, it is usually difficult to upgrade or reconstruct the existing system completely, and the micro front end is a very good means and strategy to implement the gradual reconstruction

    • Independent run time

    State is isolated between each microapplication and run time state is not shared

Qiankun profile

Qiankun is a front-end microservice framework based on single-SPA implemented by Ant Financial.

  • The core design concept of Qiankun
    • simple

    As the main application and micro application can be stack independent, Qiankun is just a library like jQuery for users. You need to call several apis of Qiankun to complete the micro front end transformation of the application. Meanwhile, thanks to THE HTML entry and sandbox design of Qiankun, accessing microapplications is as simple as using IFrame.

    • Decoupling/technology stack independent

    The core goal of the micro front end is to break up the boulder application into several loosely coupled micro-applications that can be autonomous. Many of the designs of Qiankun are based on this principle, such as HTML Entry, sandbox and inter-application communication. Only in this way can we ensure that microapplications can be developed independently and run independently.

Active Application Configuration

Yarn Add Qiankun

// main.js import { registerMicroApps, start } from 'qiankun' new Vue({ router, store, render: h => h(App), Mounted () {const getActiveRule = hash => location => location.hash. RegisterMicroApps ([{name: 'vue-Qiankun-sub ', // subapp package.json name entry: '//localhost:8081', //local debug address for child application container: '#sub-container', // Mounted DOM node activeRule: getActiveRule('#/sub-vue'), }, ]) start() }, }).$mount('#app')Copy the code

Add activeRule to route path

{ path: '/sub-vue/about', name: 'About', component: () => import('@/views/Qiankun.vue'), meta: { title: 'Child ', keepAlive: true,},},Copy the code

qiankun.vue

<template lang="pug"> page-header-wrapper #sub-container </template> <script> export default { name: 'Qiankun', data() { return {} }, beforeCreate() { this.$router.push({ query: { ... this.$route.query, hideMenus: true, }, }) }, } </script> <style lang="less" scoped> #sub-container { width: 100%; height: 100%; } </style>Copy the code

Sub-application Configuration

Add public-path.js to the SRC directory and import it in main.js

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

The entry file main.js is modified, and the root ID name should not be the same as the main application.

let instance = null let router = null const render = ({ container } = {}) => { router = routes instance = new Vue({ router, store, render: h => h(App), }).$mount(container ? Container. QuerySelector ('#vue-app') : '#vue-app')} window.__POWERED_BY_QIANKUN__) { render() } export async function bootstrap() { console.log('vue app bootstraped') } Export async function mount(props) {console.log('props from main framework', props) } export async function unmount() {instance.$destroy() instance.$el.innerhtml = "instance" = null router = null }Copy the code

vue.config.js

{... {headers: {' access-Control-allow-origin ': '*',}, port: '8081',}, configureWebpack: {output: {library: '${name}-[name] ', libraryTarget: 'umd', `webpackJsonp_${name}`, }, }, }Copy the code

Route File Modification

let prefix = '' if (window.__POWERED_BY_QIANKUN__) { prefix = '/sub-vue' } { path: prefix + '/about', name: 'About', Component: () => import('@/views/ about.vue '), meta: {title: 'About', keepAlive: true,},},Copy the code

Specific project Address

The main application needs to switch to the Qiankun Branch Vue sub-application address

Points to be aware of

  1. When the route of the primary application is redirected, the path of the primary application must exist and be consistent in the path menu of the sub-application
  2. When react is a child application, route switchover does not redirect problem resolution, related issue address: hashchange
  3. Duplicate style names for the primary and child applications can lead to style problems. Use the UI library to change the class prefix for style isolation
  4. The root ID names of the primary and child applications should be different

The React project qiankun integration is in the works. Stay tuned!