（基座，主应用）umi4max + （ 子应用 ）vite-vue3 + qiankun（ 踩坑记录 ）

报错： single-spa minified message #31

umi4max 代码

config.js

qiankun:{
  master: {
    apps: [
      {
        name: 'vue3',
        entry: 'http://localhost:3000/',
      },
    ],
  },
}

路由引入

{
    path: '/',
    microApp: 'vue3',
}

name 和 microApp 保持一致

vite-vue3 安装插件

npm i vite-plugin-qiankun

vite-plugin-qiankun: 帮助应用快速接入乾坤的vite插件

vite.config.s

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import qiankun from "vite-plugin-qiankun";

const useDevMode = true

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // useDevMode = true 时不开启热更新
    vue(),
    qiankun('vue3sub', {
      useDevMode
    })
  ],
  base: '/',
  server: {
    port: 7108,
    cors: true,
  },
})

main.js

import { App, createApp } from 'vue'
import app from './App.vue'
import { renderWithQiankun, qiankunWindow } from "vite-plugin-qiankun/es/helper";

let root: App;

function render(props: any) {
  const { container } = props;
  root = createApp(app)
  const c = container
    ? container.querySelector("#app")
    : document.getElementById("app")
  root.mount(c)
}

console.log(3333)

renderWithQiankun({
  mount(props) {
    console.log("vue3sub mount");
    render(props);
  },
  bootstrap() {
    console.log("bootstrap");
  },
  unmount(props: any) {
    console.log("vue3sub unmount");
    root.unmount();
  },
  update(props: any) {
    console.log("vue3sub update");
    console.log(props)
  },
});

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render({});
}

完整代码都在这里，直接替换使用就可以了