Write up front: Microservices are booming, and so are microfronts. Recently, I developed a large ERP system and decided to use micro front-end framework. After seeing various micro front-end frameworks of several large factories, I finally decided to use Qiankun. The main reason is that compared with other frames, qiankun’s ecology is more abundant, and some documents of other big factories are really difficult to complete at a glance. It may also be that the younger brother is not well educated and can not feel the mystery of the document

The following documents use the VUE framework as the base framework

Micro front end qiankun configuration

I will sort out the configuration content separately from the following points

  1. Main application base configuration
  2. Sub-application Configuration
  3. Master application communication problem handling
  4. About the Nginx configuration release

It has a lot of content and is easy to miss

Main application base configuration

Main Contents:

  • Initialize the application and install the Qiankun dependency package
  • Registers sub-application information
  • Modifying the Routing Mode (History/Hash)
  1. I’m using Ant-Design-Pro as the base framework
git clone --depth=1 https://github.com/vueComponent/ant-design-vue-pro.git main
Copy the code
  1. Install the Qiankun dependency package
yarn add qiankun
Copy the code
  1. Registered sub-apps (Qiankun offers two apis)

Method 1: registerMicroApps

//main.js
import { registerMicroApps } from 'qiankun'
registerMicroApps([
  {
    name: 'childone'.entry:'http://10.100.72.158:8080/qks/'.container: '#childone'.activeRule: '/mainqks/childone'},... ] )Copy the code

Method 2: loadMicroApp

    if (!window.qiankunStarted) {
      window.qiankunStarted = true
      this.microApp = loadMicroApp(
        {
          name: 'setpro'.entry: 'http://your ip/setpro/page1'.container: '#setpro'
        },
        {
          fetch(url, ... args) {
            return window.fetch(url, ... args) } } ) }Copy the code
  1. Add a container page for mounting child applications. Start indicates the API used to start mounting child applications
<! -- Subcontainer mount area --><div class="child-area">
      <div id="res"></div>
      <div id="ordsys"></div>
      <div id="fin"></div>
      <div id="crm"></div>
      <div id="playmini"></div>
    </div>. . .import { start } from 'qiankun'. start()Copy the code
  1. Add the route of this page to the route
import Qks from '.. /views/qiankuns/index.vue'  
{
    path: '/mainqks'.name: 'mainqks'.component: Qks
 },
Copy the code
  1. Modify the original Ant routing mode to obtain the permission from the back-end maintenance to store/index.js after matching the route maintained by the front-end

Ant-design-pro provides two permissions, as described in its documentation

  1. Modify the name property in package.json to ensure that the project name is unique
"name": "your pro name".Copy the code
  1. Env VUE_APP_PREVIEW (false) changed from false to true
VUE_APP_PREVIEW=true
Copy the code

Basic sub-application configuration

Main Contents:

  • Clone Base project (in this case ant-Design-Pro)
  • Export the corresponding lifecycle hooks
  • Configure the public – path. Js
  • Configure microapplication packaging (mainly involving vue.config.js)
  • Configuration devServer
  • Configuring mock Preview
  1. Cloning Foundation Project
git clone --depth=1 https://github.com/vueComponent/ant-design-vue-pro.git child-one
Copy the code
  1. Export the appropriate lifecycle hooks (the Actions here are the communication tools I wrapped and will refer to later)
//main.js
export async function bootstrap () {
  console.log('[vue] vue app bootstraped')}export async function mount (props) {
  console.log('[vue] props from main framework', props)
  // Inject an Actions instance
  actions.setActions(props)
  render(props)
}
export async function unmount () {
  instance.$destroy()
  instance.$el.innerHTML = ' '
  instance = null
  router = null
}
Copy the code
  1. The public-path.js file is added under SRC and needs to be imported in main.js
/* eslint-disable */
if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}
Copy the code

Introduced in the main. Js

// if (! window.__POWERED_BY_QIANKUN__) { render() }Copy the code
  1. Configure microapplications as subpackages for dock access
//vue.config.js
const packageName = require('./package.json').name;
module.exports = {
  output: {
    library: `${packageName}-[name]`,
    libraryTarget: 'umd',
    jsonpFunction: `webpackJsonp_${packageName}`,
  },
};
Copy the code
  1. DevServer configuration header
Headers :{' access-Control-allow-origin ': '*'}}Copy the code
  1. Special variable name modification

Bootstrap has the same name as the hook function of Qiankun, and it will be renamed here

The router has a destruction reassignment process that renames it

  1. The complete main.js code
// with polyfills import './public-path' import 'core-js/stable' import 'regenerator-runtime/runtime' import Vue from 'vue' import App from './App.vue' import childRouter from './router' import store from './store/' import i18n from './locales' import { VueAxios } from './utils/request' import ProLayout, { PageHeaderWrapper } from '@ant-design-vue/pro-layout' import themePluginConfig from '.. /config/themePluginConfig' // mock // WARNING: `mockjs` NOT SUPPORT `IE` PLEASE DO NOT USE IN `production` ENV. import './mock' import antBootstrap from './core/bootstrap' import './core/lazy_use' // use lazy load components import './permission' // permission control import './utils/filter' // global filter import './global.less' // global style import actions from './actions/index' Vue.config.productionTip = false // mount axios to `Vue.$http` and `this.$http` Vue.use(VueAxios) // use pro-layout components Vue.component('pro-layout', ProLayout) Vue.component('page-container', PageHeaderWrapper) Vue.component('page-header-wrapper', PageHeaderWrapper) window.umi_plugin_ant_themeVar = themePluginConfig.theme let router = null let instance = null function render (props = {}) { const { container } = props router = childRouter instance = new Vue({ router, store, i18n, created: antBootstrap, 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', SetActions (props) render(props)} export async function unmount () {instance.$destroy() instance.$el.innerHTML = '' instance = null router = null }Copy the code

Added vue3. X configuration

  1. Modify the package output path and publicPath in vue.config.js to be consistent with the base of the route

If the identifier of the history route configured by the base sub application is childone

9. Modify the original Ant routing mode from back-end maintenance to back-end access, which is consistent with the main application 10. Env file VUE_APP_PREVIEW, same as the main application 11. The reason for modifying package.json is the same as that configured in the main application

Possible routing problems

  1. Route jump failure, 404, repeated hop, etc., route related errors

Solution:

For example:

  1. The master and child applications are in history mode
  2. The registration mode in the main application is as follows:
  {
    name: 'childsix', 
    entry: 'http://your ip/nginxtest/',
    container: '#childsix',
    activeRule: '/nginxtest/'
  },
Copy the code

If the path in the browser changes to
, the subapplication is mounted. The /nginx/ must be the same as the base of the router configured in the subapplication.

export default new Router({
  base: '/nginxtest/',
  mode: 'history',
  routes: constantRouterMap
})
Copy the code

The nginxtest identifier needs to be set in the main application as follows, otherwise, the main application will not recognize the route and jump to 404, which is easy to forget

  {
    path: '/nginxtest/*',
    component:TestPage
  },
Copy the code