Vite2 vue3 微应用 接入qiankun 方法

目前qiankun 官方还没有出 vue3 和vite 的接入方法，下面写一下我是如何把 vite2 + vue3 接入乾坤的

1.配置 vite.config.ts

把项目打包成 umd 格式的js 文件

const { name } = require("./package");
export default ()=>{
	return defineConfig({
    //...其他配置
    build: {
      target: "esnext",
      lib: {
        name: `${name}-[name]`,
        entry: path.resolve(__dirname, "src/main.ts"),
        formats: ["umd"],
      },
    },
  })
}

2.改造路由配置

// src/router/router.ts

///...其他代码
const router = createRouter({
  history: createWebHashHistory(
    window.__POWERED_BY_QIANKUN__ ? "/app-vue/" : "/"
  ),
  routes,
});
export default router;

3.改造入口文件

//src/main.ts
import Vue from "vue";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/router";
import { createRouter, createWebHashHistory } from "vue-router";

// let router;
let instance: Vue.App<Element>;

declare global {
  interface Window {
    __POWERED_BY_QIANKUN__?: string;
  }
}

interface IRenderProps {
  container: Element | string;
}

function render(props: IRenderProps) {
  const { container } = props;
  instance = createApp(App);
  instance
    .use(Antd)
    .use(router)
    .mount(
      container instanceof Element
        ? (container.querySelector("#app") as Element)
        : (container as string)
    );
}
// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render({ container: "#app" });
}
//暴露主应用生命周期钩子
export async function bootstrap() {
  console.log("subapp bootstraped");
}

export async function mount(props: any) {
  console.log("mount subapp");
  render(props);
}

export async function unmount() {
  console.log("unmount college app");
  instance.unmount();
}

通过上面改造，打包之后，即可接入到主应用中

⚠️ 打包之后的项目没有入口 html 文件，因此你可以自己生成一个 index.html 在dist 目录中，也可以利用 @rollup/plugin-html 自动生成html并注入js 和css文件

我的个人博客：www.9cka.cn