qiankun 微前端实战

发布于 约 13 分钟

大型前端项目拆成多个独立部署的子应用，主应用统一调度。qiankun 是蚂蚁开源的微前端框架，本文从主应用配置到子应用接入，讲清 qiankun 的核心用法。

qiankun 微前端配图：蓝色渐变背景上中央基座平台通过管道桥连接多个独立子应用浮岛，扁平科技插画
qiankun：主应用统一调度，子应用独立部署

一、微前端解决什么问题

单体前端项目代码量几十万行，多团队协作冲突多、构建慢、技术栈难统一。微前端把应用拆成多个独立部署的子应用，主应用负责布局和路由，子应用各自迭代。

方案技术栈隔离部署独立成本
iframe完全隔离是体验差
模块联邦是是配置复杂
qiankun是是中等，生态成熟

二、安装与主应用配置

npm install qiankun
// 主应用 main.js
import { registerMicroApps, start } from 'qiankun';

// 注册子应用
registerMicroApps([
  {
    name: 'app-vue',           // 子应用名称
    entry: '//localhost:8081', // 子应用入口
    container: '#subapp-viewport', // 子应用挂载的容器
    activeRule: '/vue',         // 路由匹配规则
  },
  {
    name: 'app-react',
    entry: '//localhost:8082',
    container: '#subapp-viewport',
    activeRule: '/react',
  },
]);

// 启动
start();
<!-- 主应用 HTML -->
<div id="subapp-viewport"></div>
注意：子应用需要导出三个生命周期函数：bootstrap、mount、unmount。qiankun 在切换时自动调用。

三、子应用改造

// Vue 子应用 main.js
import Vue from 'vue';
import App from './App.vue';

let instance = null;

// 独立运行时直接挂载
if (!window.__POWERED_BY_QIANKUN__) {
  instance = new Vue({ render: h => h(App) }).$mount('#app');
}

// qiankun 生命周期导出
export async function bootstrap() {
  console.log('子应用初始化');
}

export async function mount(props) {
  instance = new Vue({ render: h => h(App) }).$mount('#app');
}

export async function unmount() {
  instance.$destroy();
  instance = null;
}

四、样式隔离

// 主应用 start 时开启样式隔离
start({
  sandbox: {
    experimentalStyleIsolation: true, // 实验性样式隔离
  },
});

// 或者使用严格模式
start({
  sandbox: true, // JS 沙箱 + 样式隔离
});

qiankun 的样式隔离基于 Shadow DOM 或 CSS Scoping，避免子应用之间样式互相污染。

五、主子应用通信

// 主应用：通过 initGlobalState 传递全局状态
import { initGlobalState } from 'qiankun';

const actions = initGlobalState({
  user: '小明',
  token: 'abc123',
});

// 子应用里获取
export async function mount(props) {
  props.onGlobalStateChange((state) => {
    console.log('收到全局状态：', state);
  });
}

六、部署要点

# 子应用打包后部署到独立的 CDN 或服务器
# 确保子应用入口 HTML 可跨域访问（CORS）

# 子应用 vue.config.js 配置跨域
module.exports = {
  devServer: {
    port: 8081,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
};

七、总结

qiankun 微前端的核心三步：主应用注册子应用并启动、子应用导出三个生命周期、开启样式隔离和沙箱。适合多团队协作的大型项目。记住：子应用独立开发独立部署，主应用负责调度和布局，样式和 JS 都做隔离避免冲突。

延伸阅读