开发过程中，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，这时候我们需要引入微前端作为渐进式重构的手段和策略。为了满足将Oinone无缝接入现有项目，能在现有项目和Oinone之间路由、嵌套、通信等的需求，现整理出了Oinone接入乾坤的模版工程——工程压缩包地址

模版工程启动

工程结构目录介绍

最外层micro-front-end用pnpm工作区来管理多工程仓库，维护统一的安装、运行、清除、构建等的脚本。micro-main是主应用，micro-son是子应用，模拟重构工作量巨大的老应用，ss-front-modules是Oinone应用。
micro-front-end/
│── packages/
│ ├── micro-main/
│ │ ├── package.json
│ ├── micro-son/
│ │ ├── package.json
│ ├── ss-front-modules/
│ │ ├── packages/
│ │ │ ├── ss-admin-widget/
│ │ │ ├── ss-boot/
│ │ │ ├── ss-oinone/
│ │ │ ├── ss-project/
│ │ ├── package.json
│── package.json

模版工程安装、运行

1. 安装

在micro-front-end目录下 pnpm install

2. 运行

在micro-front-end目录下 pnpm run dev，这里应当能看到启动了三个服务（端口8888～8890），其中http://localhost:8888/是主应用。

3. 效果

进入 http://localhost:8888/主应用 ，可以路由到Oinone应用看效果

接入步骤分析

1. 主应用搭建

微应用注册配置

配置了一个oinone的子应用，name是ss-boot。

export const SUB_APP_CONFIG = {
  subApps: [
    {
      name: 'micro-son', // 子应用名称，跟package.json一致
      entry: '//localhost:8889', // 子应用入口，本地环境下指定端口
      container: '#micro-son', // 挂载子应用的dom
      activeRule: '/app/micro-son', // 路由匹配规则
      props: {}, // 主应用与子应用通信传值
      sandbox: {
        strictStyleIsolation: false, // 关闭严格样式隔离
        experimentalStyleIsolation: false // 关闭实验性样式隔离
      }
    },
    {
      name: 'ss-boot', // 子应用名称，跟package.json一致
      entry: '//localhost:8890', // 子应用入口，本地环境下指定端口
      container: '#app-oinone', // 挂载子应用的dom
      activeRule: '/app/ss-boot', // 路由匹配规则
      props: {}, // 主应用与子应用通信传值
      sandbox: {
        strictStyleIsolation: false, // 关闭严格样式隔离
        experimentalStyleIsolation: false // 关闭实验性样式隔离
      }
    }
  ]
};

main.ts 执行注册逻辑

import { registerMicroApps } from "qiankun";

function registerApps() {
  try {
    // 调用乾坤注册微应用方法，subApps 就是上面的配置
    registerMicroApps(subApps, {
      beforeLoad: [
        (app) => {
          console.log("before load", app);
          return Promise.resolve();
        },
      ],
      beforeMount: [
        (app) => {
          console.log("before mount", app);
          return Promise.resolve();
        },
      ],
      afterUnmount: [
        (app) => {
          console.log("before unmount", app);
          return Promise.resolve();
        },
      ],
    });
  } catch (err) {
    console.log(err);
  }
}

registerApps();
// 可以看到这里 mount 的是micro-main，所以需要把 index.html 里的 id="app" 改成 id="micro-main"
createApp(App).use(router).mount("#micro-main");

主应用路由配置

以vue-router举例，将所有 /app/ss-boot 路由全部重定向到使用 Oinone 微应用的组件

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

const routes = [
  {
    path: "",
    redirect: { name: "micro-son" },
    meta: { title: "首页" },
    children: [
      {
        path: "/home",
        name: "home",
        component: () => import("../components/HelloWorld.vue"),
      },
      {
        path: "/app/micro-son/:pathMatch(.*)*",
        name: "micro-son",
        component: () => import("../components/MicroSon.vue"),
      },
      // 这个前缀可以自定义，跟 Oinone 应用的 BASE_PATH 对应起来即可
      {
         path: "/app/ss-boot/:pathMatch(.*)*",
         name: "ss-boot",
         component: () => import("../components/SsFrontModules.vue"),
       },
    ],
  },
];

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

主应用的某个组件使用Oinone微应用

在挂载点dom生成之后启动乾坤

<template>
  <!-- 微应用挂载点，与注册配置里的container对应 -->
  <div id="app-oinone"></div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { start } from "qiankun";

export default defineComponent({
  mounted() {
    if (!window.qiankunStarted) {
      window.qiankunStarted = true;
      start();
    }
  },
});
</script>
<style>
#app-oinone {
  flex: auto;
  height: 100%;
}
</style>

dev服务器配置

这里以vite举例，如此启动后主应用就配置好了

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 8888,
    proxy: {
      // 将 /pamirs 开头的请求重定向到 oinone 后端
      "/pamirs": {
        // 支持跨域
        changeOrigin: true,
        target: "https://one.oinone.top/",
      },
    },
  },
});

2. Oinone应用搭建

配置 ss-boot的环境变量

BASE_PATH=/app/ss-boot
BASE_PATH的作用是给Oinone应用的路由添加公共前缀，适配主应用的路由

ss-boot目录下main.ts暴露乾坤所需的生命周期

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

export const bootstrap = async () => {};

export const mount = async () => {
  // 挂载
  return new Promise(async (resolve, reject) => {
    try {
      await VueOioProvider(
        {
          browser: {
            title: 'Oinone - 构你想象!',
            favicon: 'https://pamirs.oss-cn-hangzhou.aliyuncs.com/pamirs/image/default_favicon.ico'
          },
          dependencies: {
            vue: import('vue'),
            lodashEs: import('lodash-es'),
            antDesignVue: import('ant-design-vue'),
            elementPlusIconsVue: import('@element-plus/icons-vue'),
            elementPlus: import('element-plus'),
            kunlunDependencies: import('@kunlun/dependencies'),
            kunlunVueUiAntd: import('@kunlun/vue-ui-antd'),
            kunlunVueUiEl: import('@kunlun/vue-ui-el')
          }
        },
        []
      );
      resolve(true);
    } catch (error) {
      console.log(error);
      reject(false);
    }
  });
};

export const update = async () => {
  // 更新
};

export const unmount = async () => {
  // 取消挂载
};

// 正常启动
if (!window.__POWERED_BY_QIANKUN__) {
  mount();
}

访问

主子应用都要pnpm run dev启动，访问主应用。当路由匹配到微应用的activeRule后，会自动加载微应用并挂载