vue3+vite项目作为子应用如何配置qiankun

使用 vite-plugin-qiankun 快速实现微前端

在现代前端开发中，微前端（Micro-Frontend）是一个非常流行的架构模式，能够将多个独立的前端应用组合在一起，提升团队协作和独立部署的能力。本文将介绍如何使用 vite-plugin-qiankun 来实现微前端架构，并提供清晰的步骤和代码示例。

---

1. 安装依赖

首先需要安装 vite-plugin-qiankun，这个插件能够让 Vite 快速接入微前端框架 Qiankun。

npm i vite-plugin-qiankun

---

2. 配置 vite.config.js

在 vite.config.js 文件中添加 vite-plugin-qiankun 的相关配置，指定子应用的名称，并启用 useDevMode 来方便开发调试。

代码示例：

import qiankun from 'vite-plugin-qiankun';
const { name } = require('./package.json'); // 从 package.json 中获取子应用名称

export default {
  plugins: [
    qiankun(name, {
      useDevMode: true, // 开启调试模式
    }),
  ],
};

---

3. 修改子应用的入口文件 main.ts

子应用需要接入 Qiankun 的生命周期方法，包括 bootstrap、mount、unmount 和可选的 update 方法。通过 renderWithQiankun 配合 qiankunWindow 判断运行环境，确保子应用既可以作为独立应用运行，也可以作为微前端的一部分。

代码示例：

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

let app: any;

// 渲染函数：支持独立运行或微前端环境
const render = ({ container }: { container?: Element } = {}) => {
  app = createApp(App);
  app.mount(container ? container.querySelector('#app') : '#app');
};

// Qiankun 生命周期 - 挂载子应用
renderWithQiankun({
  bootstrap() {
    console.log('子应用 bootstrap');
  },
  mount(props: QiankunProps) {
    console.log('子应用 mount');
    render(props);
  },
  unmount(props: QiankunProps) {
    console.log('子应用 unmount');
    if (app) {
      app.unmount(); // 卸载 Vue 应用
      app = null; // 清除应用实例
    }
    console.log('子应用已注销');
  },
  update(props: QiankunProps) {
    console.log('子应用 update', props);
  },
});

// 独立运行时的渲染逻辑
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render();
}

---

4. 在主应用中加载子应用

主应用通过 loadMicroApp 方法动态加载子应用，并将子应用挂载到指定的容器中。同时可以在 onBeforeUnmount 中调用子应用的 unmount 方法，确保在主应用卸载时对子应用进行清理。

代码示例：

import { loadMicroApp, start } from 'qiankun';
import { ref } from 'vue';

const microApp = ref(null);
const renderEl = ref(null); // 挂载子应用的 DOM 容器

    // 加载子应用
onMounted(() => {
  microApp.value = loadMicroApp(
    {
      name: 'micro-name', // 子应用名称
      entry: '//localhost:3335/micro-sys/', // 子应用入口地址
      container: renderEl.value, // 子应用挂载的 DOM 节点
    },
    {
      sandbox: {
        strictStyleIsolation: false, // 是否严格样式隔离
        experimentalStyleIsolation: true, // 实验性样式隔离（推荐）
        speedy: true, // 提升样式加载速度
      },
    }
  );

  // 启动 Qiankun
  start();
 });
 // 卸载子应用
onBeforeUnmount(() => {
  microApp.value?.unmount();
});

---

5. 优化点

为了使代码更简洁和可维护，可以加入以下优化点：

• 抽取生命周期方法： 将子应用的生命周期方法抽离成单独模块，主应用调用时更加清晰。
• 错误处理： 在加载子应用时，加入错误捕获逻辑，避免因网络问题或子应用挂载失败导致主应用崩溃。
• 配置动态化： 将子应用的 entry 地址等配置提取到环境变量或配置文件中，便于切换不同环境。

---

6. 完整运行流程

1. 子应用：

   • 配置 vite-plugin-qiankun。
   • 实现 bootstrap、mount、unmount 等生命周期方法。
   • 判断运行环境，支持独立运行和微前端环境。

2. 主应用：

   • 使用 loadMicroApp 挂载子应用，并确保子应用资源隔离。
   • 在主应用生命周期中，正确启动和卸载子应用。

---