微前端qiankun(vue3) + 子应用vue2(vite) + 子应用umi4

首先创建一个主应用，这里使用vite + vue3创建

主应用部分：

// 项目创建
npm create vite@latest my-vue-app -- --template vue

// 在入口文件main.js / index.js下注册微应用
import { registerMicroApps, start } from "qiankun";
const app = [
  {
    name: "sub-umi",
    entry: "//localhost:8000", // 子应用一启动的端口号
    container: "#sub-app",
    activeRule: "/sub-umi",
  },
  {
    name: "sub-vue",
    entry: "//localhost:8081",// 子应用二启动的端口号
    container: "#sub-app",
    activeRule: "/sub-vue",
  },
];
registerMicroApps(app, {
  beforeLoad: [async (app) => console.log("beforeLoad", app.name)],
  beforeMount: [async (app) => console.log("beforeMount", app.name)],
  beforeUnmount: [async (app) => console.log("beforeUnmount", app.name)],
});

start();

// 主应用的App.vue中定义子应用渲染区域
<template>
  qiankun app vue
  <div><a href="/">主应用首页</a></div>
  <div><a href="/sub-umi">子应用UMI</a></div>
  <div><a href="/sub-vue">子应用Vue2</a></div>

  <!-- 子应用渲染区域 -->
  <div id="sub-app"></div>
</template>

子应用一（umi4）

// 1. 项目创建
npx create-umi@latest
// 2. 安装@umijs/plugins
npm i @umijs/plugins
// 3. .umirc.ts中配置开启微前端
export default defineConfig({ 
  // 微前端配置部分代码
  base: "sub-umi", // 对应主应用中的activeRule
  plugins: ["@umijs/plugins/dist/qiankun"],
  qiankun: {
    slave: {},
  },
});
到这就配置完成了！！！

子应用二（vue2 + vite）

// 1. 项目创建这里就不说了 

// 2. 安装vite-plugin-qiankun
npm i vite-plugin-qiankun

// 3. .vite.config.js中配置微前端
import qiankun from "vite-plugin-qiankun";
export default defineConfig({ 
  // 微前端配置部分代码
   plugins: [ 
    qiankun("sub-vue", {
      useDevMode: true,
    }),
  ],
    server: {  
    origin: "http://localhost:8081", // 防止主应用访问时静态资源404,子应用二的开启端口地址
  },
});

// 4. 入口文件main.js中配置 
import {
  renderWithQiankun,
  qiankunWindow,
} from "vite-plugin-qiankun/dist/helper";

function render(app) {
  new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount(app);
}

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render("#app");
} else {
  renderWithQiankun({
    mount(props) {
      render(props.container.querySelector("#app"));
    },
    bootstrap() {
      console.log("bootstrap");
    },
    update() {
      console.log("update");
    },
    unmount() {
      console.log("mount");
    },
  });
}

> 特别注意：因为主应用配置的子应用二地址为/sub-vue,所以在vue项目中要配置router根路径base: '/sub-vue'

> 注意：！！！如果主应用访问子应用时接口404，需要在主应用也配置接口代理，代理到对应的子应用启动端口

// 主应用的vite.config.js文件
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      "/api": {
        //
        target: "http://localhost:8081", // 子应用二的地址，防止接口404
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\//, ""),
      },
    },
  },
});