基于qiankun实现微前端

qiankun

什么是qiankun？qiankun 是一个基于 single-spa 的微前端实现库，可帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

什么是微前端

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

微前端架构具备以下几个核心价值：

• 技术栈无关
  主框架不限制接入应用的技术栈，微应用具备完全自主权
• 独立开发、独立部署
  微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
• 增量升级
  在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术-栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
• 独立运行时
  每个微应用之间状态隔离，运行时状态不共享

应用搭建

1. 主应用
   在main.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()

在App.vue中增加微应用的容器节点

2. 微应用
修改main.js，如下：

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.js中增加以下配置

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}`,
    }
  }
}

新建pubulic-path.js文件，增加以下内容

// 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__;
}

总结

以上是小编使用qiankun和两个vue项目实现微前端的过程，另外微前端还有其它的实现方式，如路由分发、微应用、将iframe作为容器等，可自行了解。