使用 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. 完整运行流程
-
子应用：
- 配置
vite-plugin-qiankun。 - 实现
bootstrap、mount、unmount等生命周期方法。 - 判断运行环境，支持独立运行和微前端环境。
- 配置
-
主应用：
- 使用
loadMicroApp挂载子应用，并确保子应用资源隔离。 - 在主应用生命周期中，正确启动和卸载子应用。
- 使用
