vue3 + vite + qiankun 微前端的使用总结

安装

注意主应用和子应用都需要先安装qiankun
pnpm i qiankun 

vite的话对qiankun的支持 需要用到 一个插件  vite-plugin-qiankun 也需要 pnpm i vite-plugin-qiankun
      
```mermaid
baseApp src文件夹下
      -新建qinakun-config这个文件夹
          -index.js
          -microApps.js
           
**index.js**
import { registerMicroApps } from "qiankun";
import subApps from "./microApps.js";

export function injectMicroApps() {
  try {
    registerMicroApps(subApps, {
      beforeLoad: [
        (app) => {
          console.log("before load", app);
        },
      ],
      beforeMount: [
        (app) => {
          console.log("before mount", app);
        },
      ],
      afterUnmount: [
        (app) => {
          console.log("before unmount", app);
        },
      ],
    });
  } catch (error) {
    console.log(error);
  }
}
   

**microApps.js**

//这里一个{} 就表示一个微应用
let subApps = [
  {
    name: "app-vue3",// name 需要唯一
    entry: "//localhost:5173",
    container: "#app-vue3",// 表示承载为应用的容器的id
    activeRule: "/app-vue3",// 匹配的路由
  },
  {
    name: "app-react",
    entry: "//localhost:5174/home",
    container: "#app-react",
    activeRule: "/app-react",
  },
];
export default subApps

baseApp某一个vue组件中注册微应用并且启用 qiankun 这个框架

我这里在App.vue 中直接启动

<script lang="ts" setup>
import { onMounted } from 'vue'
import { start } from 'qiankun'
import { injectMicroApps } from './qiankun-config/index'

onMounted(() => {
  if (!window.qiankunStarted) {
    // 是否启用qiankun
    window.qiankunStarted = true
    injectMicroApps()
    // 开启qiankun
    start({
      // sandbox: {
      //   // sandbox: { strictStyleIsolation: true } // 严格隔离
      //   // experimentalStyleIsolation: true // 样式隔离
      // }
    })
  }
})

</script>
<template>
  <div class="wrap">
    <a href="">123</a>
    <div id="app-vue3">
    这里是子应用的入口容器，需要跟subApps 中子项的container对应
    </div>
    <div id="app-react">
    </div>
  </div>
</template>

最后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({
  // 这里的注册上qiankun插件，并且声明一下子应用的name?
  // 子应用也是这样配置上就可以了 下面不赘述了
  plugins: [qiankun("app-vue3", { useDevMode: true }), vue()],
});

micro 微应用配置

注意这里默认都是提前安装好包了的 下面步骤可谓是缺一不可！！！

micro app1

src > main.js


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

let app;

const render = (container) => {
  app = createApp(App);
  app.use(router);
  app.mount(container ? container.querySelector("#app") : "#app");
};

const initQianKun = () => {
  renderWithQiankun({
    mount(props) {
      const { container } = props;
      render(container);
    },
    bootstrap() {},
    unmount() {
      app.unmount();
    },
  });
};

qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render();
// 判断是直接访问还是通过qiankun，在主应用里加载微应用

子应用路由配置：

import { createRouter, createWebHistory } from "vue-router";
import { qiankunWindow } from "vite-plugin-qiankun/dist/helper";

let router = createRouter({
  history: createWebHistory(
    qiankunWindow.__POWERED_BY_QIANKUN__ ? "/app-vue3/" : "/"
  ),
  routes: [
    {
      path: "/",
      name: "home",
      component: () => import("../view/home.vue"),
    },
  ],
});

export default router;

这些正确配置，经过测试是可以正常访问且不报错的~~~

最后截图附上：