qiankun在vue3 vue2 为主应用 ，vue3+vite为子应用 使用

  https://gitee.com/qiaoyongli/qiankun.git

1.vue2 的主应用 

（1）引入乾坤包   npm install  qiankun -S

（2）main.js代码如下

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

//qiankun配置
import { registerMicroApps, start } from "qiankun";

//子应用列表
let apps = [
  {
    name: "pageone",
    entry: "//localhost:8081", //子应用的地址，这里演示是本地启动的地址。
    container: "#app", //子应用的容器节点的选择器（vue一般为app）
    activeRule: "/home/pageone", //访问子应用的规则，比如：主应用为localhost:8080，那访问该子应用的url应为localhost:8080/home/pageone
  },
];

//注册子应用
registerMicroApps(apps);

//启动
start();

new Vue({
  render: (h) => h(App),
}).$mount("#app");

2.vue3+vite 为   子    应用 

npm install  vite-plugin-qianku@1.0.15   //下载乾坤插件

main.js代码如下

import { createApp } from 'vue'
import '@/assets/style.css'
import App from './App.vue'
import { createWebHistory } from 'vue-router'
import createRouter from "./router"
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'

let router = null
let instance = null
let history = null

function render(props) {
  console.log("__POWERED_BY_QIANKUN__", qiankunWindow.__POWERED_BY_QIANKUN__)
  const container = props ? props.container : undefined
  history = createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/home' : '/ms-home')

  
  router = createRouter(history)
  console.log(router);
  
  instance = createApp(App)
  instance.use(router)
  instance.mount(container ? container.querySelector('#app') : '#app')
}
renderWithQiankun({
  mount(props) {
    render(props)
    instance.config.globalProperties.$onGlobalStateChange = props.onGlobalStateChange
    instance.config.globalProperties.$setGlobalState = props.setGlobalState
  },
  bootstrap() {
    console.log('%c%s', 'color: green;', 'vue3.0 app bootstraped')
  },
  unmount() {
    instance.unmount()
    instance._container.innerHTML = ''
    instance = null
    router = null
    history.destroy()
  },
  update() {
    console.log('update')
  }
})

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

router.js 代码如下

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

import Layout from "@/layout/index.vue";

const routers = [
  {
    path: "/", //根目录路由为/
    component: Layout, //指定使用Layout组件布局
    redirect: "/pageone",
    children: [
      {
        path: "/pageone",
        name: "pageone",
        component: () => import("@/views/pageone.vue"),
      },
      {
        path: "/pageone/pagetwo",
        name: "pagetwo",
        component: () => import("@/views/pagetwo.vue"),
      },
    ],
  },

];


export default function (history) {
  return createRouter({
    history: history,
    routes:routers
  })
}

layout/index.vue 代码如下   可以使用layout布局

<template>
  <el-container class="contanier_box">
    <el-header class="headerClass">
      <Header></Header>
    </el-header>

    <el-container class="lcr">
      <el-main class="mainBox">
        <router-view v-slot="{ Component }">
          <Transition name="fade-right" mode="out-in">
            <component :is="Component"></component>
          </Transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import Header from "@/components/header.vue";
import { onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
</script>

<style lang="scss" scoped>
.contanier_box {
  width: 100vw;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  overflow: hidden;
  .headerClass {
    width: 100%;
    height: 13%;
  }

  .lcr {
    width: 100%;
    height: 87%;
    .sliberLeft {
      width: 7%;
      height: 100%;
    }
    .mainBox {
      width: 86%;
      height: 100%;
      padding: 0;
      overflow: hidden;
    }
    .sliberRight {
      width: 7%;
      height: 100%;
    }
  }
}

.fade-right-enter-to,
.fade-right-leave-from {
  opacity: 1;
  transform: none;
}
.fade-right-enter-active,
.fade-right-leave-active {
  transition: all 0.5s;
}
.fade-right-enter-from,
.fade-right-leave-to {
  opacity: 0;
  // transform: translateX(-2000px);
}
</style>

子应用首页代码位置

3.上面是vue2 为主应用   vue3+vite 为子应用       接下来是 vue3的主应用代码 mian.js

   "qiankun": "^2.10.16",

    "vue": "^3.2.13"

import { createApp } from "vue";
import App from "./App.vue";

import { registerMicroApps, start, setDefaultMountApp } from "qiankun";

// 在主应用中注册子应用
registerMicroApps([
  {
    name: "vue app",
    entry: "//localhost:8081", // 重点
    container: "#app", // 重点
    activeRule: "/home/pageone", // 重点
    props: {
      appContent: "",
    },
  },
]);
setDefaultMountApp("/home");
// 启动
start();

createApp(App).mount("#app");

目前实现了vue2 为主  或者 vue3 为主      vue3+vite为子的本地运行页面之间的切换