vue3+vite+qiankun实现微应用

主应用

1、安装qiankun

npm install qiankun

2、在主应用中创建微应用的入口文件 src\views\micro\index.vue

这个文件主要是用来提供一个 DOM 节点挂载微应用

<template>
  <div class="xin">
    <p>qiankun入口文档</p>
    <div id="qiankun-container"></div>
    <!--xinHome 为放置子项目的盒子  -->
  </div>
</template>

<!-- <script>
import { loadMicroApp, start } from 'qiankun'; //引入手动调用方法

export default {
  name: 'XinVue2',
  data() {
    return {};
  },
  created() {
    this.$nextTick(() => {
      // hash模式下配置
      const getActiveRule = hash => location => location.hash.startsWith(hash);
      this.vueApp = loadMicroApp({
        name: 'qiankun-children',
        entry: '//localhost:8081/',
        container: '#xinHome',
        activeRule: getActiveRule('#/'),
      });
      //启动乾坤函数
      start({ singular: false });
    });
  },
  beforeDestroy() {
    console.log(this.vueApp.unmount({ name: 'qiankun-children' }));
    this.vueApp.unmount({ name: 'qiankun-children' });
  },
  methods: {},
};
</script> -->

3、配置乾坤路由router/index.js

      {
        // 匹配所有其他路由
        path: '/:pathMatch(.*)*',
        name: 'micro',
        component: () => import('@/views/micro/index.vue'),
      },

4、新建qiankun配置页src\micro-apps\index.ts

import { registerMicroApps, start } from 'qiankun';
import NProgress from 'nprogress'
import "nprogress/nprogress.css";
// 加载动画
const setLoadingLoader = (loading: boolean) => {
  if (loading) {
    NProgress.start()
  } else {
    NProgress.done()
  }
}
// 子应用
const microApps = [
  {
    name: 'qiankun-children',
    entry: '//localhost:3001',
    activeRule: '/qiankun-one'
  }
]
// 生命周期处理
const lifeCycles = {
  beforeLoad: (app: any) => {
    console.log("before load app.name====>>>>>", app.name)
    return Promise.resolve(app)
  },
  beforeMount: (app: any) => {
    console.log("before mount app.name====>>>>>", app.name)
    return Promise.resolve(app)
  },
  afterMount: (app: any) => {
    console.log("after mount app.name====>>>>>", app.name)
    return Promise.resolve(app)
  }
}
// 子应用处理
const normalizeMicroApp = (apps = []) => {
  return apps.map((app: any) => ({
    container: '#qiankun-container',
    loader: setLoadingLoader,
    ...app
  }))
}
const register = () => registerMicroApps(normalizeMicroApp(microApps), lifeCycles)
export default {
    register,
    start
}

5、main.js中引入qiankun配置页

import microApps from './micro-apps';
microApps.register();
microApps.start();

6、app.vue中放入微应用的入口文件

<template>
  <router-view />
  <section id="qiankun-container"></section>
</template>
<script>
import { start } from 'qiankun';
export default {
  mounted() {
    if (!window.qiankunStarted) {
      window.qiankunStarted = true;
      start();
    }
  },
};
</script>

<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
}
</style>

7、主应用调用微应用页面路由

http://localhost:2888/qiankun-one/back

微应用

1、微应用安装vite-plugin-qiankun

npm install vite-plugin-qiankun

1、vite.config.ts配置

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

export default defineConfig({
  plugins: [
    vue(),
    // 需要在这里注册子应用名称，
    qiankun("qiankun-children", {
      useDevMode: true,
    }),
  ],
  server: {
    port: 3001,
    cors: true, // 需要开启跨域！
  },
});

2、main.ts配置

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router';
import { renderWithQiankun, qiankunWindow } from "vite-plugin-qiankun/dist/helper"
import App from './App.vue'
import routes from "./router";
let router = null;
let instance: any = null;
let history: any = null;
function render(props = {}) {
    const { container } = props;
    //名字需要和主应用的入口名字对的上
    history = createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/qiankun-one' : '/');
    router = createRouter({
        history,
        routes,
    });
    instance = createApp(App);
    instance.use(router);
    instance.mount(container ? container.querySelector('#app') :document.getElementById("app"));
    if (qiankunWindow.__POWERED_BY_QIANKUN__) {
        console.log('我正在作为子应用运行')
    }
}
renderWithQiankun({
    bootstrap() {
        console.log('sub app one bootstrap')
    },
    mount(props) {
        console.log('sub app one mount')
        render(props);
    },
    update() {
        console.log('sub app one update')
    },
    unmount(props) {
        console.log('sub app one unmount')
        instance.unmount();
        instance._container.innerHTML = '';
        history.destroy();
        router = null;
        instance = null;
    }
});
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
    render();
}

3、页面配置

3.1 HomeComponent.vue

<template>
  <div>
    我是HomeComponent
    <router-link to="/back">前往BackHome</router-link>
  </div>
</template>
 
<script>
export default {
  name: "HomeComponent",
}
</script>
 
<style scoped>
 
</style>

3.2 BackHome.vue

<template>
  <div>
    我是BackHome
    <router-link to="/">回到HomeComponent</router-link>
    //这个to="/"是router中配置的HomeComponent的地址
  </div>
</template>

<script>
export default {
  name: "BackHome",
};
</script>

<style scoped></style>

4、路由配置 router/index.ts

const routes = [
  {
    path: "/",
    name: "HomeComponent",
    component: () => import("../view/HomeComponent.vue"),
  },
  {
    path: "/back",
    name: "BackHome",
    component: () => import("../view/BackHome.vue"),
  },
];
export default routes;

主应用使用微应用页面路由跳转

http://localhost:2888/qiankun-one/back