qiankun微前端的简单使用

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
微前端借鉴了微服务的架构理念，将一个庞大的前端应用拆分为多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用联合为一个完整的应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。

主应用

安装

npm i qiankun -S

registerMicroApps方法，新建一个hooks文件，生成一个usehooks供全局使用，然后在需要微前端的地方调用即可

• 当路由跳转匹配上qiankun配置的规则时，则会跳转到子应用的路由如（/one/pagesone）则匹配子应用的pagesone的路由

import { registerMicroApps, runAfterFirstMounted, start } from "qiankun/es"
import { RegistrableApp } from "qiankun"

export const useQiankun = () => {
    // const app = [
    //     {
    //     name: 'ms-one', // 微应用的名称
    //     entry: 'http://localhost:3001/', // 微应用的入口
    //     container: '#one-container', // 微应用的容器节点的选择器
    //     activeRule: '/one' // 微应用的激活规则匹配路由规则
    //   }]
    const initQiankun = (app: Array<RegistrableApp<Record<string, unknown>>>, mounted = () => {}) => {
      registerMicroApps(app, {})
      // 第一个微应用 mount 后需要调用的方法，比如开启一些监控或者埋点脚本 
      runAfterFirstMounted(() => {
        mounted()
      })
      start({ prefetch: true }) // 启动
    }
    return { initQiankun }
}

使用

对应的页面创建dom、生成对应的app

<script lang="ts" setup>
import { onMounted } from 'vue'
import { useQiankun } from './hooks/useQiankun'
const app = [
  {
  name: 'ms-one',
  entry: 'http://localhost:3001/',
  container: '#one-container',
  activeRule: '/one'
}]
const { initQiankun } = useQiankun()
onMounted(() => {
  initQiankun(app)
})

</script>

<template>
  <div class="app-one-container">
    <div id="one-container"></div>
  </div>
</template>

子应用

安装vite的插件 vite-plugin-qiankun

npm i vite-plugin-qiankun -D

vite.config.ts中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import Pages from 'vite-plugin-pages'
import qiankun from "vite-plugin-qiankun"

export default defineConfig({
  plugins: [
    vue(),
    Pages({
      dirs: 'src/views'
    }),
    qiankun("ms-one", {
      useDevMode: true
    })
  ],

  base: "/ms-one/",

  server: {
    port: 3001
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src")
    }
  }
})

mian.js 中监听是子应用使用还是主应用过来

import { createApp } from 'vue'
import '@/assets/style.css'
import App from './App.vue'
import { createWebHistory } from 'vue-router'
import createRouter from "./router"
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'

let router: any = null
let instance: any = null
let history: any = null

function render(props: any | undefined) {
  console.log("__POWERED_BY_QIANKUN__", qiankunWindow.__POWERED_BY_QIANKUN__)
  const container = props ? props.container : undefined
  history = createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/one' : '/ms-one')
  router = createRouter(history)
  instance = createApp(App)
  instance.use(router)
  instance.mount(container ? container.querySelector('#app') : '#app')
}
renderWithQiankun({
  mount(props: any) {
    render(props)
    instance.config.globalProperties.$onGlobalStateChange = props.onGlobalStateChange
    instance.config.globalProperties.$setGlobalState = props.setGlobalState
  },
  bootstrap() {
    console.log('%c%s', 'color: green;', 'vue3.0 app bootstraped')
  },
  unmount() {
    instance.unmount()
    instance._container.innerHTML = ''
    instance = null
    router = null
    history.destroy()
  },
  update() {
    console.log('update')
  }
})

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render(undefined)
}

最后在建立对应的路由即可完成主应用对子应用的跳转