vue3主应用+子应用（vite-plugin-qiankun），粗略记录

主应用

1.安装 qiankun
yarn add qiankun # 或者 npm i qiankun -S

2.在main.ts添加
import { registerMicroApps, start } from 'qiankun';
//配置两个子应用 
registerMicroApps([
    {
        name: 'vue-node-pro',// 子应用名字
        entry: 'http://localhost:3001/login"',// 子应用进入地址（哪个页面）
        container: '#qk-micro-vue', // 与第三步div id对应
        activeRule: '/qk-micro-vue',// 子应用的路由
    }
]);

//启动 qiankun
start()

3.APP.vue 里面添加
<div id="qk-micro-vue"></div>

子应用

安装

npm install vite-plugin-qiankun

vite.config.ts

import { defineConfig, UserConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
import qiankun from 'vite-plugin-qiankun'
import { resolve } from "path";

let pastName = 'vue-node-pro'

export default defineConfig(({ mode }: UserConfig) => {
  const root = process.cwd() //  process.cwd()返回当前工作目录
  const env = loadEnv(mode, root)

  let config = {
    base: env.VITE_BASE_API,
    plugins: [
      vue(),
      qiankun('vite-pinia-ts-vue3',  // 微应用名字，与主应用注册的微应用名字保持一致
        { useDevMode: true }
      )
    ],
    resolve: {
      alias: [
        {
          find: "@",
          replacement: resolve(__dirname, "src"),
        },
      ],
    },
    server: {
      host: true, // 暴露内网ip
      port: 3001,
      cors: true,
      origin: mode === 'development' ? env.VITE_ORIGIN_DEV : env.VITE_BASE_API
    },
    output: {
      // 把子应用打包成 umd 库格式
      library: `${pastName}-[name]`,
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${pastName}`
    }
  }
  return config
})

main.ts

import routes from '@/routers'
import Antd from 'ant-design-vue';
// import 'ant-design-vue/dist/antd.css';

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import {
  QiankunProps,
  renderWithQiankun,
  qiankunWindow
} from 'vite-plugin-qiankun/dist/helper'

let router = null
let instance: any = null
let history: any = null

instance = createApp(App)

declare global {
  interface Window {
    __POWERED_BY_QIANKUN__: any
    __INJECTED_PUBLIC_PATH_BY_QIANKUN__: any
  }
}

function render(props: QiankunProps = {}) {
  const { container, baseUrl } = props as any
  history = createWebHashHistory(
    qiankunWindow.__POWERED_BY_QIANKUN__ ? '/calendar-mobile' : '/'
  )
  router = createRouter({
    history,
    routes
  })

  instance.use(router)
  instance.use(Antd);
  instance.mount(
    container ? container.querySelector('#app') : document.getElementById('app')
  )
  if (qiankunWindow.__POWERED_BY_QIANKUN__) {
    console.log('我正在作为子应用运行')
  }
}

// some code
renderWithQiankun({
  bootstrap: function (): void | Promise<void> {
  },
  mount: function (props: QiankunProps): void | Promise<void> {
    render(props)
  },
  unmount: function (props: QiankunProps): void | Promise<void> {
    instance.unmount()
    instance._container = null
    instance = null
    router = null
    history.destroy()
  },
  update: function (props: QiankunProps) { }
})

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

路由（当时遇到的小问题）

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  { path: "/", redirect: "/login" },
  {
    path: '/login',
    name: 'login',
    component: () => import("../view/login/index.vue"),
    // alias: '/login',
    // meta: {
    //   title: 'todolist页面'
    // }
  }
];

// const routers = createRouter({  移到main.ts 中了
//   history: createWebHistory(),
//   routes
// });
export default routes;