微前端Vue3+vite+qiankun接入子应用

微前端的主要逻辑就是在跳转路由的时候，对路由进行拦截，子应用匹配到的时候，就加载子应用 

主应用 ：

安装依赖：npm install qiankun

在src文件下新建qiankun文件夹，在文件夹里面新建index.js

index.js:

import { registerMicroApps, start } from 'qiankun'
registerMicroApps([
    {
        name: 'vue-app', // 必须与微应用注册名字相同
        entry: 'http://127.0.0.1:5174', // 入口路径，开发时为微应用所启本地服务，上线时为微应用线上路径
        container: '#vue-app-container', // 微应用挂载的节点
        activeRule: '/child-vue', // 当访问路由为 /micro-vue 时加载微应用
        props: {
            msg: "来自主应用的值  // 主应用向微应用传递参数
        }
    },
])
start({
    prefetch:'all' // 预加载
})

 然后在main里面引入这个文件：import "./qiankun"

在App.vue里面挂在节点

<script setup></script>

<template>
  <div>
    我是主应用
    <div id="vue-app-container" />
  </div>
</template>

<style scoped></style>

微应用：

首先安装依赖，vite使用：npm install vite-plugin-qiankun

vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import qiankun from 'vite-plugin-qiankun'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    qiankun("vue-app", {
      // 微应用名字，与主应用注册的微应用名字保持一致
      useDevMode: true,
    }),
  ],
  server: {
    port: "5174",
  },
});

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'

const initQianKun = () => {
    renderWithQiankun({
        // 当前应用在主应用中的生命周期

        mount(props) {
            console.log(props);
            render(props.container)
            //  可以通过props读取主应用的参数：msg
        },
        bootstrap() { },
        unmount() { },
    })
}

const render = (container) => {
    // 如果是在主应用的环境下就挂载主应用的节点，否则挂载到本地
    const appDom = container ? container : "#app"
    createApp(App).mount(appDom)
}

// 判断当前应用是否在主应用中
qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render()

// createApp(App).mount('#app')

然后启动两个项目，打开主项目，在url后面添加：/child-vue，可以看到已经可以加载到子应用了