微应用-qiankun+vite+vue3

原创

已于 2025-04-03 09:26:19 修改 · 802 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

于 2025-01-21 15:21:23 首次发布

基座与子应用代码示例（自动加载）

本示例中，基座为Vue3，子应用也是Vue3，由于qiankun不支持Vite构建的项目，这里还要引入

vite-plugin-qiankun 插件

基座（主应用）

加载qiankun依赖

 npm i qiankun -S

qiankun配置（src/qiankun）

src/qiankun/config.ts

export default {
  subApps: [
    {
      name: 'sub-app', // 子应用名称，跟package.json一致
      entry: 'http://localhost:3001/sub-app/', // 子应用入口，本地环境下指定端口
      container: '#sub-container', // 挂载子应用的dom
      activeRule: '/sub-app', // 路由匹配规则
      props: {} // 主应用与子应用通信传值
    },
  ]
}

src/qiankun/index.ts

import { registerMicroApps, start } from 'qiankun'
import config from './config'

const { subApps } = config

// 注册子应用
export function registerApps() {
  try {
    registerMicroApps(subApps, {
      beforeLoad: [
        async app => {
          console.log('before load', app)
        }
      ],
      beforeMount: [
        async app => {
          console.log('before mount', app)
        }
      ],
      afterUnmount: [
        async app => {
          console.log('before unmount', app)
        }
      ]
    })
  } catch (err) {
    console.log(err)
  }
}

export function qiankunStart() {
  registerApps()
  // 启动微服务
  start()
}

src/views/sub-app/index.vue

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

<script setup lang="ts">
import { qiankunStart } from '@/qiankun'
import { onMounted } from 'vue'

onMounted(() => {
  qiankunStart()
})
</script>

<style lang="scss" scoped>
</style>