无界微前端框架(Wujie)快速入门指南

邹岩讳Sally

于 2025-06-09 09:04:33 发布

阅读量662

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/gitblog_00776/article/details/148524471

无界微前端框架(Wujie)快速入门指南

什么是无界微前端框架

无界(Wujie)是一款轻量级的微前端解决方案，它能够帮助开发者轻松实现多个独立前端应用的集成与协同工作。与传统的iframe方案相比，无界提供了更好的性能和更灵活的集成方式，同时保持了子应用的独立性。

主应用集成步骤

1. 安装与引入

首先需要在主应用中引入无界框架的核心模块：

import { bus, setupApp, preloadApp, startApp, destroyApp } from "wujie";

对于Vue或React项目，可以直接使用对应的封装组件，简化集成流程。

2. 配置子应用参数

使用setupApp方法可以预先设置子应用的默认参数，避免重复配置：

setupApp({
  name: "subApp1",  // 子应用唯一标识
  url: "https://subapp.example.com",  // 子应用地址
  exec: true,  // 是否执行子应用脚本
  el: "#container",  // 挂载容器
  sync: true  // 是否同步路由
});

3. 预加载优化

为了提高用户体验，可以使用preloadApp预先加载子应用资源：

preloadApp({ name: "subApp1" });

4. 启动子应用

当需要显示子应用时，调用startApp方法：

startApp({ name: "subApp1" });

子应用改造指南

无界对子应用的改造要求极低，在大多数情况下，子应用几乎不需要任何修改即可集成。

跨域配置

由于子应用资源将在主应用域名下加载，需要确保子应用服务器配置了正确的CORS策略。以下是一个Node.js服务器的示例配置：

app.use((req, res, next) => {
  res.set({
    "Access-Control-Allow-Credentials": true,
    "Access-Control-Allow-Origin": req.headers.origin || "*",
    "Access-Control-Allow-Headers": "X-Requested-With,Content-Type",
    "Access-Control-Allow-Methods": "PUT,POST,GET,DELETE,OPTIONS",
    "Content-Type": "application/json; charset=utf-8",
  });
  next();
});

运行模式适配

无界支持三种运行模式，不同模式下子应用的改造要求也不同：

保活模式：子应用无需任何改造
重建模式：子应用无需任何改造
单例模式：需要添加生命周期钩子

生命周期改造示例

对于单例模式，需要在子应用中添加挂载和卸载的生命周期函数：

Vue 2.x 改造

if (window.__POWERED_BY_WUJIE__) {
  let instance;
  window.__WUJIE_MOUNT = () => {
    const router = new VueRouter({ routes });
    instance = new Vue({ router, render: (h) => h(App) }).$mount("#app");
  };
  window.__WUJIE_UNMOUNT = () => {
    instance.$destroy();
  };
} else {
  new Vue({ router: new VueRouter({ routes }), render: (h) => h(App) }).$mount("#app");
}

Vue 3.x 改造

if (window.__POWERED_BY_WUJIE__) {
  let instance;
  window.__WUJIE_MOUNT = () => {
    const router = createRouter({ history: createWebHistory(), routes });
    instance = createApp(App);
    instance.use(router);
    instance.mount("#app");
  };
  window.__WUJIE_UNMOUNT = () => {
    instance.unmount();
  };
} else {
  createApp(App).use(createRouter({ history: createWebHistory(), routes })).mount("#app");
}

React 改造

if (window.__POWERED_BY_WUJIE__) {
  window.__WUJIE_MOUNT = () => {
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById("root")
    );
  };
  window.__WUJIE_UNMOUNT = () => {
    ReactDOM.unmountComponentAtNode(document.getElementById("root"));
  };
} else {
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById("root")
  );
}

特殊处理：Vite项目

由于Vite采用异步加载机制，需要特别注意主动调用无界的渲染函数：

if (window.__POWERED_BY_WUJIE__) {
  let instance;
  window.__WUJIE_MOUNT = () => {
    const router = createRouter({ history: createWebHistory(), routes });
    instance = createApp(App);
    instance.use(router);
    instance.mount("#app");
  };
  window.__WUJIE_UNMOUNT = () => {
    instance.unmount();
  };
  window.__WUJIE.mount(); // 主动调用防止异步问题
} else {
  createApp(App).use(createRouter({ history: createWebHistory(), routes })).mount("#app");
}