子应用接入

子应用要做的事

子应用不依赖 qiankun 包，只需要：

1. 导出三个生命周期函数：bootstrap / mount / unmount；
2. 打包成 UMD 格式，暴露全局变量；
3. 开发环境配 CORS，方便主应用跨域拉取。

生命周期钩子

// 入口文件（src/main.js 或类似）
export async function bootstrap(props) {
  // 初始化阶段，只调用一次（可选）
}

export async function mount(props) {
  // 挂载：在这里创建应用实例并渲染
  // props 里能拿到：container（挂载容器）、主应用透传的数据、通信 API
}

export async function unmount(props) {
  // 卸载：销毁实例、清理事件和定时器，防止内存泄漏
}

unmount 必须把"挂载时创建的东西"清干净（实例销毁、全局事件、定时器、container 内的 DOM），否则切换路由再回来会出现重复挂载或状态残留。

Vue 2 子应用示例

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

let instance = null;

function render(props = {}) {
  const { container } = props;
  instance = new Vue({
    router,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

// 独立运行时直接渲染（不通过 qiankun）
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {}

export async function mount(props) {
  render(props);
}

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

Vue 3 类似，把 new Vue(...).$mount() 换成 createApp(App).use(router).mount(container) 即可。

React 子应用示例

// main.js（先处理 webpack public path）
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

let root = null;

function render(props = {}) {
  const { container } = props;
  root = ReactDOM.createRoot(
    container ? container.querySelector('#root') : document.querySelector('#root')
  );
  root.render(<App />);
}

if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {}

export async function mount(props) {
  render(props);
}

export async function unmount() {
  root?.unmount();
  root = null;
}

__POWERED_BY_QIANKUN__ 是 qiankun 注入的全局标记，用于区分「独立运行」和「被 qiankun 托管」。

webpack 配置（关键）

// 子应用 webpack.config.js
module.exports = {
  output: {
    library: 'appVue',                      // 挂到全局的名字（UMD 用）
    libraryTarget: 'umd',                    // 必须 UMD，qiankun 才能拿到生命周期
    jsonpFunction: 'webpackJsonpAppVue',     // 防冲突（webpack5 用 chunkLoadingGlobal）
  },
  devServer: {
    headers: { 'Access-Control-Allow-Origin': '*' },  // 允许主应用跨域拉取
  },
};

• libraryTarget: 'umd'：让子应用把生命周期函数挂到 window 上，qiankun 靠它识别；
• jsonpFunction / chunkLoadingGlobal：每个子应用必须唯一，否则多个子应用的异步 chunk 加载会互相冲突；
• webpack5 项目请用 chunkLoadingGlobal 代替 jsonpFunction。

子应用独立运行

if (!window.__POWERED_BY_QIANKUN__) {
  render();   // 不通过 qiankun 时直接渲染，方便单独调试
}