qiankun+vite+vue3 学习踩坑

1. 出现的问题： 子应用能显示，但是没有显示在指定的 container: "#container", 容器中。。。。

解决：子应用的根容器id不要与主应用的根容器一样，不要所有应用根容器id都是app

 2.出现的问题： 使用的vite框架，怎么试都报错。。。

解决：  目前qiankun框架官方还未完全适配vite应用。子应用中需要使用vite-plugin-qiankun插件来解决这些问题。

好烦，这个问题百度了好久才找到问题的原因。。。。

子应用改后的vite.config.ts

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

export default defineConfig({
  // base: "/app1",
  plugins: [
    vue(),
    qiankun("app1", {
      useDevMode: true, // 开发模式
    }),
  ],

  // 关键：配置 UMD 格式输出
  build: {
    target: "esnext",
    rollupOptions: {
      output: {
        format: "umd", // 使用 UMD 格式
        name: "app1", // 模块名称
        globals: {
          vue: "Vue", // 外部化 Vue
        },
      },
      external: ["vue"], // 不打包 Vue
    },
  },

  server: {
    host: "localhost",
    port: 5173,
    headers: {
      "Access-Control-Allow-Origin": "*", // 允许跨域
    },
  },
});

// 子应用 main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";
import {
  qiankunWindow,
  renderWithQiankun,
} from "vite-plugin-qiankun/dist/helper";
let app = null;

function render(props = {}) {
  const { container } = props;
  app = createApp(App);
  app.use(router); // 如果需要路由
  app.mount(container?.querySelector("#app1") || "#app1");
}

// 独立运行时
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render();
}

renderWithQiankun({
  mount(props) {
    console.log("mount");
    render(props);
  },
  bootstrap() {
    console.log("bootstrap");
  },
  unmount(props: any) {
    console.log("子应用卸载");
    app.unmount();
    app = null;
  },
});

 主应用的main.ts

import { createApp } from "vue";

import {
  registerMicroApps,
  runAfterFirstMounted,
  addGlobalUncaughtErrorHandler,
  start,
} from "qiankun";

import router from "./router"; // 导入路由配置
import App from "./App.vue";
const app = createApp(App);
app.use(router).mount("#app");

registerMicroApps(
  [
    {
      name: "app1",
      entry: "//localhost:5173", 
      container: "#container",
      activeRule: "/app1",
      props: {
        // routerBase: "/app1",
      },
    },
    {
      name: "app2",
      entry: "//localhost:5174", 
      container: "#container",
      activeRule: "/app2",
      props: {
        // routerBase: "/app2",
      },
    },
  ],
  {
    beforeLoad: [
      (app) => {
        console.log("[生命周期] 开始加载:", app.name);
        return Promise.resolve();
      },
    ],
    beforeMount: [
      (app) => {
        console.log("[生命周期] 即将挂载:", app.name);
        // 检查容器是否存在
        const container = document.querySelector(app.container);
        console.log("[容器检查]", container);
        return Promise.resolve();
      },
    ],
    afterMount: [
      (app) => {
        console.log("[生命周期] 挂载完成:", app.name);
      },
    ],
    beforeUnmount: [
      (app) => {
        console.log("[生命周期] 即将卸载:", app.name);
        return Promise.resolve();
      },
    ],
    afterUnmount: [
      (app) => {
        console.log("[生命周期] 卸载完成:", app.name);
      },
    ],
  }
);

runAfterFirstMounted(() => {
  console.log("子应用加载完毕");
});

start({
  prefetch: "all", // 预加载子应用
  sandbox: { experimentalStyleIsolation: true }, // 样式隔离
});

// 主应用 main.ts
addGlobalUncaughtErrorHandler((event) => {
  console.error("[全局错误]", event);
  const { message, type } = event;

  if (message?.includes("died in status LOADING_SOURCE_CODE")) {
    console.error("[错误] 加载源码失败:", message);
  } else if (message?.includes("died in status BOOTSTRAPPING")) {
    console.error("[错误] 初始化失败:", message);
  } else if (message?.includes("died in status MOUNTING")) {
    console.error("[错误] 挂载失败:", message);
  } else if (type === "unhandledrejection") {
    console.error("[错误] 未处理的 Promise 拒绝:", message);
  }
});

真不容易，总算实现了一个最简单的小demo。。。。

3.当我点击了子应用2中的一个路由/center,希望跳转的是子应用中的路由，但是效果确实

跳转了http://localhost:5175/center，跳转到了主应用中的个人中心路由了

解决： 子应用中的路由需要配置路由前缀

与这里的activeRule保持一致，这样就点击跳转的地址就是http://localhost:5175/app2/center就是子应用的路由了

这里有一个未解决的问题，本来想通过props传参的形式将这个前缀传给子应用，但是子应用中没找到方法获取，所以暂时没有实现动态的配置。

4.配置2个子应用在主应用的不同层级的路由下，app1在二级路由下，app2在一级路由下

实现： 主应用的router中，二级路由/center/app1,必须要配一个占位组件，仅提供容器，不然就会报错。

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/home",
    name: "Home",
    component: () => import("../components/Home.vue"),
  },
  {
    path: "/center",
    name: "center",
    component: () => import("../views/apps/index.vue"),
    children: [
      {
        path: "/center/message",
        name: "message",
        component: () => import("../views/apps/Message.vue"),
      },
      {
        path: "app1",
        name: "app1",
        component: () => import("../components/Empty.vue"),
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

 这里的activeRule:要保持一致

子应用app1中，这2个地方也要保持一致