Qiankun 生命周期与数据通信实战

关注

原创 2026-01-14 18:17:02 932 阅读 AI 写同款· GEO 优化 ›

微前端架构实战：深入qiankun框架与应用案例 微前端是一种应用架构，将复杂的应用分解为一组小团队可以独立开发、测试和部署的小型前端应用集合。这种模式推动了前端开发的模块化和解耦，使得大型应用的维护和扩展变得更加灵活。qiankun还提供了一套事件通信机制，允许主应用和子应用之间通过自定义事件进行交互。这包括主应用向子应用广播事件，以及子应用向主应用派发事件。// 在主应用中派发一个事件if (event.origin === '子应用的域名') {console.log('接收到子应用派发的事件', payload);break; 阅读详情

微前端是一种前端架构模式，它将一个大型的前端应用拆分成多个独立、可独立部署的子应用，然后通过一个主应用（或基座应用）将这些子应用集成在一起。

项目支持作为子应用集成到 qiankun 微前端框架中，qiankun 是一个基于 single-spa 的微前端框架，主要特点包括：基于路由的自动激活、样式隔离、JS 沙箱、预加载、全局状态管理。

主应用代码分析

主应用与子应用交互流程如下：

1）注册阶段：主应用调用 regMicroAllApp(list) 批量注册子应用

2）路由生成：调用 getMicroAllRouter(microAll) 生成微应用路由

3）启动框架：调用 loadingMicro() 启动 qiankun 框架

4）路由匹配：当 URL 匹配到子应用的 activeRule 时

5）子应用挂载：触发子应用的 mount 生命周期，调用 render(props) 渲染

6）状态同步：通过 actions 同步主应用与子应用的状态

7）子应用卸载：当离开子应用路由时，触发 unmount 生命周期

相关逻辑封装到 main\spa\node_modules@pangu\mixmicro\dist\index.esm.js 里

子应用注册机制

微前端路由采用双层路由体系：主应用配置子应用的入口路由和激活规则 ，控制子应用是否加载；子应用配置内部页面的具体路由 ，控制内部页面显示

regMicroAllApp(list) - 批量注册子应用

框架会记录每个子应用的 name 、 entry 、 activeRule 等信息，监听 URL 变化，当 URL 匹配到某个子应用的 activeRule 时，就会准备加载该子应用

参数 list：包含所有子应用配置的数组
entry：子应用入口，支持自定义或默认路径（ origin/pathname/name/index.html ）
container：子应用挂载容器，固定为 #subapp-viewport
activeRule：子应用激活规则，支持多种 URL 格式
props：传递给子应用的数据，包括上层产品名、百度地图 API、侧边栏和主应用路由

const regMicroAllApp = (list) => {
  if (regMicroAllApp.length === 0)
    return;
  const microAllApp = [];
  list.map((item) => {
    microAllApp.push({
      name: item.name,
      entry: item.entry ? item.entry : window.location.origin + window.location.pathname + item.name + "/index.html",
      container: "#subapp-viewport",
      activeRule: ["/#/" + item.name, "/index.html#/" + item.name, window.location.pathname + "#/" + item.name, window.location.pathname + "index.html#/" + item.name],
      props: {
        "upper-name": item["upper-name"],
        "BMap": window.BMap,
        "Sidebar": window.Sidebar,
        "mainRouter": Router
      }
    });
  });
  registerMicroApps(microAllApp);
};

getMicroAllRouter(microAll) - 生成微应用路由

为每个子应用生成两个动态路由，使用 Vue Router 的 /:pathMatch(.) 和 /:pathMatch(.)* 匹配所有子应用路由，路由组件统一使用 @pangu/layout/index.vue

const getMicroAllRouter = (microAll) => {
  const microAllRouter = [];
  microAll.map((item) => {
    microAllRouter.push({
      name: item.name,
      path: "/" + item.name + "/:pathMatch(.*)",
      meta: { parameter: true },
      component: () => import("@pangu/layout/index.vue")
    });
    microAllRouter.push({
      name: item.name,
      path: "/" + item.name + "/:pathMatch(.*)*",
      meta: { parameter: true },
      component: () => import("@pangu/layout/index.vue")
    });
  });
  return microAllRouter;
};

当 URL 匹配到子应用的 activeRule 时，框架会：

1）加载子应用资源：通过 entry 地址获取子应用的 HTML、CSS 和 JavaScript

2）创建挂载容器：在主应用的 #subapp-viewport 容器中为子应用创建 DOM 节点

3）执行子应用代码：调用子应用的 mount 生命周期函数

4）渲染子应用：子应用在自己的容器中渲染内容

子应用生命周期管理

bootstrap：子应用初始化，目前为空实现
mount：子应用挂载，保存 props 到全局 window 对象，设置应用为嵌入模式，配置路由前置守卫，同步路由元信息到全局状态，并调用 render 函数挂载子应用
unmount ：子应用卸载，检查是否需要清理数据（通过 microNeedClean 标识），若需要清理，调用 setting/exit 退出并卸载实例，否则仅卸载实例
update ：子应用更新，目前为空实现

function life(render, instance = null) {
  const obj = {};
  obj.bootstrap = async () => {
  };
  obj.update = async () => {
  };
  obj.mount = async (props) => {
    window.props = props;
    console.log("++++微应用渲染++++");
    Store.commit("setting/SET_EMBEDDING", true);
    if (Router) {
      Router.beforeEach((to, from, next) => {
        props.setGlobalState && props.setGlobalState({
          meta: to.meta,
          cleanData: false
        });
        next();
      });
    }
    instance = render(props);
  };
  obj.unmount = async (props) => {
    const microNeedClean = window.localStorage.getItem("microNeedClean") === "true";
    if (microNeedClean) {
      localStorage.removeItem("microNeedClean");
      Store.dispatch("setting/exit");
      instance.unmount();
    } else {
      instance.unmount();
    }
  };
  window.qiankunLifecycle = {
    bootstrap: obj.bootstrap,
    mount: obj.mount,
    unmount: obj.unmount,
    update: obj.update
  };
}

数据通信

props 传递

在注册子应用时，通过 props 传递静态数据：

// 主应用注册时传递
props: {
  "upper-name": item["upper-name"], // 上层应用名
  "BMap": window.BMap, // 百度地图API
  "Sidebar": window.Sidebar, // 侧边栏组件
  "mainRouter": Router // 主应用路由实例
}

// 子应用中使用
console.log(window.props["upper-name"]); // 输出: "mainapp"

全局状态管理

通过 actions 对象实现主应用和子应用之间的动态数据共享：

初始化全局状态 initialState ，包含元信息、皮肤、语言等
actions.onGlobalStateChange：监听全局状态变化，同步到 Vuex 的 micro 模块
actions.setGlobalStatePg：封装了全局状态设置方法

const initialState = {
  meta: null,
  cleanData: false,
  skin: "",
  lang: "",
  mobileCloudData: null,
  expandData: null,
  thcloud: null
};
const actions = initGlobalState(initialState);
actions.onGlobalStateChange((state, prev) => {
  if (state.meta) {
    state.meta.parent_id = getParentId();
  }
  Store.commit("micro/SET_PARAMETER", state);
});
actions.setGlobalStatePg = (val) => {
  actions.setGlobalState({ ...initialState, ...val });
};

微前端框架启动

使用 window.qiankunStarted 避免重复启动，调用 qiankun 的 start 方法启动框架，配置沙箱模式： strictStyleIsolation: false （不严格隔离样式）

function loadingMicro() {
  if (!window.qiankunStarted) {
    window.qiankunStarted = true;
    console.log("++++非容器内启动乾坤,加载路由会自动加载微应用");
    setTimeout(() => {
      start({
        sandbox: { strictStyleIsolation: false }
      });
    }, 0);
  }
}

子应用代码分析

代码目录

- .vscode/               # VS Code配置文件
- build/                 # 构建脚本
- dev/                   # 开发环境配置
- http-server/           # HTTP服务器配置（Go语言实现）
- public/                # 静态资源目录
- src/                   # 源代码目录
  - app/                  # 应用入口和全局配置
    - router/              # 路由配置
      - access.ts          # 路由权限控制
      - index.ts           # 路由实例
      - routes-stack.ts    # 路由栈管理
      - routes.ts          # 路由定义
    - store/               # Vuex状态管理
      - index.ts           # Store实例
    - App.vue              # 根组件
    - index.ts             # 应用初始化
  - assets/               # 静态资源（图片、图标、样式等）
  - common/               # 公共组件、工具和服务
  - modules/              # 业务功能模块
  - main.ts               # 应用入口文件
  - app-config.d.ts       # 应用配置类型定义
- .browserslistrc        # 浏览器兼容性配置
- .cz.yaml               # Commitizen配置
- .editorconfig          # 编辑器配置
- .env                   # 环境变量配置
- .eslintignore          # ESLint忽略配置
- .eslintrc.js           # ESLint配置
- .gitignore             # Git忽略配置
- .npmrc                 # npm配置
- .prettierrc            # Prettier配置
- Dockerfile             # Docker配置
- README.md              # 项目说明文档
- babel.config.js        # Babel配置
- config.js              # 项目配置
- package.json           # 项目依赖和脚本

入口文件 main.ts

作为应用程序的入口文件，负责微前端环境检测、生命周期函数定义和全局配置

环境检测

检测当前是否运行在 qiankun 微前端环境中，如果是微前端环境，动态设置 webpack 的 publicPath，确保资源正确加载

POWERED_BY_QIANKUN：qiankun 注入的全局变量，用于标识微前端环境
INJECTED_PUBLIC_PATH_BY_QIANKUN：qiankun 注入的资源基础路径，解决子应用资源加载路径问题

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

生命周期函数

bootstrap：初始化函数，只会在子应用第一次启动时调用一次
mount：挂载函数，当子应用被挂载到主应用时调用
unmount：卸载函数，当子应用从主应用中卸载时调用，负责清理资源
props：主应用传递给子应用的数据和方法

export async function bootstrap() {
  //console.log('VueMicroApp bootstraped');
}

export async function mount(props: any) {
  (window as any).__QIANKUN_PROPS__ = props;
  storeTest(props);
  render(props);
}

export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}

全局状态变化

通过 onGlobalStateChange 监听主应用传递的全局状态变化，实现主应用与子应用之间的状态同步，如语言切换、主题切换等

参数： state 是当前全局状态， prev 是上一次的状态

function storeTest(props: any) {
  props.onGlobalStateChange &&
    props.onGlobalStateChange((state: any, prev: any) => {
      console.log(`[onGlobalStateChange - ${props.name}]:`, state);

      state?.lang && switchLang(state.lang);
      state?.skin && setTheme(state.skin);
    }, true);
}

应用路径工具 getAppPath.ts

处理应用程序在不同环境（独立运行/微前端）下的路径逻辑，确保 API 路由和资源定位的正确性

微前端环境逻辑：优先从 qiankun props 中获取 upper-name 属性；如果没有，从 URL 路径中提取第一个路径段
独立运行环境：使用环境变量 VUE_APP_PRODUCT 的值

export function getAppPath(): string {
  let pathName;
  if ((window as any).__POWERED_BY_QIANKUN__) {
    if ('props' in window && (window as any).__QIANKUN_PROPS__['upper-name']) {
      pathName = (window as any).__QIANKUN_PROPS__['upper-name'];
    } else {
      pathName = window.location.pathname.split('/')[1];
    }
  } else {
    pathName = process.env.VUE_APP_PRODUCT;
  }
  global.AppPath_PRODUCT = pathName;
  return pathName;
}

应用启动文件 index.ts

实现应用程序的启动和模块加载逻辑，动态导入子模块并集成路由和状态管理

动态导入子模块

从环境变量 VUE_APP_CONFIG 中解析模块配置，使用 webpack 的动态导入功能按需加载模块：

如果模块包含路由配置，调用 addRoute 添加到路由系统
如果模块包含状态管理，调用 addModule 添加到 Vuex store

async function loadModules() {
  const config = process.env.VUE_APP_CONFIG;
  if (!config) {
    throw Error('No config found');
  }
  const conf = JSON.parse(JSON.parse(config)) as AppConfig;
  const modules = conf.modules;

  const modulesPromise = modules.map(
    (name) =>
      new Promise((resolve) => {
        import(
          /*
            webpackInclude: INCLUDED_MODULES,
            webpackMode: 'lazy-once',
            webpackChunkName: 'modules',
          */
          '@/modules/' + name + '/module.ts'
        ).then((result) => {
          const mod = result.default as AppModule;
          if (mod.router) {
            const r = mod.router;
            addRoute(r.name, r.path, r.routes);
          }
          if (mod.store) {
            const s = mod.store;
            addModule(s.name, s.module);
          }
          resolve(mod);
        });
      }),
  );
  await Promise.all(modulesPromise);

  return conf;
}

路由、状态管理

路由守卫：添加全局路由守卫，实现权限控制和状态同步
状态同步：通过 props.setGlobalState 将子应用状态同步给主应用
Vue 实例创建：根据是否有容器参数决定挂载方式，支持独立运行和微前端挂载

export const start = async (selector: string, props: any) => {
  const [, conf] = await Promise.all([loadData(), loadModules()]);
  addRouteGuard();
  
  // 路由守卫，与主应用通信
  if (router) {
    router.beforeEach((to: any, from: any, next: any) => {
      if (props.setGlobalState) {
        props.setGlobalState({
          ignore: props.name,
          user: {
            name: props.name,
          },
          meta: to.meta,
        });
      }
      
      // 权限验证
      const token =
        sessionStorage.getItem('Authorization') || sessionStorage.getItem('ueba-Authorization');

      if (!token) {
        window.location.href = '#/404';
      } else {
        next();
      }
    });
  }
  
  // 初始化Vue实例
  const instance = new Vue({
    router,
    store,
    i18n,
    render: (h) => h(App, { props: { appConfig: conf } }),
  }).$mount(props.container ? props.container.querySelector(selector) : selector);
  return { instance, router };
};

开发环境代理配置 proxy.js

该文件是开发环境的 API 代理配置，用于在独立开发子应用时，将 API 请求转发到对应的后端服务

为不同的 API 路径配置不同的代理目标，自动添加认证信息和用户身份头，处理跨域和 SSL 证书问题

const generateProxyConfig = (config) => {
  return {
    target: config.target,               // 代理目标地址
    pathRewrite: config.pathRewrite || {},  // 路径重写规则
    auth: 'admin:secret+3s',             // 代理认证信息
    changeOrigin: true,                  // 启用跨域
    ssl: {
      rejectUnauthorized: false,         // 不验证SSL证书
      requestCert: false,
    },
    onProxyReq: (proxyReq) => {
      // 添加请求头，用于模拟用户身份
      proxyReq.setHeader('userId', '101');
      proxyReq.setHeader('userName', '666666666');
      // ...其他请求头
    },
    onProxyRes: (proxyRes, req, res) => {
      // 记录代理响应日志
      res.on('finish', () => {
        const code = res.statusCode;
        // 根据状态码打印不同颜色的日志
        // ...日志逻辑
      });
    },
  };
};

const proxyConfigs = {
  '/m1/1961322-1395971-default': generateProxyConfig({ target: 'http://127.0.0.1:4523' }),
  '/ueba/api': generateProxyConfig({ target: 'http://192.168.77.17:8087' }),
  '/model-manager/api': generateProxyConfig({ target: 'http://192.168.77.4:8088' }),
  '/csa': generateProxyConfig({ target: 'https://192.168.97.206:8443' }),
};