以无界（Wujie）微前端框架为例，进行从 0 到 1 的超级详细实战搭建讲解

原创

于 2025-11-27 13:52:41 发布 · 433 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架 #wujie

以无界（Wujie）微前端框架为例，进行从 0 到 1 的超级详细实战搭建讲解，包括环境准备、主应用开发、子应用接入、通信机制及高级配置。下面我会分步骤拆解，确保你能跟着操作完成整个微前端体系的搭建。

一、无界微前端核心优势回顾

无界的最大特点是子应用零改造接入（无需修改代码、无需暴露生命周期）、极致兼容性（支持 IE11 及老旧框架如 jQuery）、完美隔离（Snapshot 沙箱 + Shadow DOM），适合快速整合多技术栈项目或老旧系统。

二、环境准备

1. 基础环境要求

Node.js：v14+（推荐 v16/v18）
包管理器：npm/yarn/pnpm（本文用 pnpm，速度更快）
浏览器：Chrome（开发）、IE11（兼容测试，可选）

2. 安装无界依赖

无界针对不同框架提供了适配包：

Vue3 主应用：wujie-vue3
Vue2 主应用：wujie-vue2
React 主应用：wujie-react
原生 JS 主应用：wujie

本文选择Vue3 作为主应用，子应用分别用React18和Vue2，体现技术栈无关性。

三、步骤 1：搭建主应用（Vue3 + Vite）

1. 创建 Vue3 主应用

# 创建项目
pnpm create vite main-app -- --template vue
cd main-app

# 安装依赖
pnpm install

# 安装无界Vue3适配包
pnpm install wujie-vue3

2. 配置主应用路由与导航

主应用需要实现导航栏，通过切换路由或状态加载不同子应用。

（1）配置主应用路由（可选）

# 安装Vue Router
pnpm install vue-router@4

创建src/router/index.js：

import {
   
    createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
   
    path: '/', name: 'Home', component: Home },
  {
   
    path: '/react-app', name: 'ReactApp', component: () => import('../views/ReactApp.vue') },
  {
   
    path: '/vue2-app', name: 'Vue2App', component: () => import('../views/Vue2App.vue') },
];

const router = createRouter<