wujie微前端项目实战

Wujie+Vue3+Vue2微前端管理系统

一，项目结构与技术栈

wujie-admin/                  # 主应用（Vue3）
├── src/
│   ├── views/
│   │   └── SubApp.vue       # 子应用容器组件
│   ├── utils/
│   │   └── preload.js       # 子应用预加载逻辑
├── vite.config.js

sub-app-vue2/                # 子应用1：Vue2 权限模块
├── src/
│   ├── main.js             # 改造入口文件适配无界
│   ├── router.js           # 独立路由
│   └── store.js            # Vuex 状态管理

sub-app-vue3/                # 子应用2：Vue3 数据看板
├── src/
│   ├── main.js             # 无界生命周期注入
│   └── router.js           # 使用 history 模式

二、核心功能实现代码

1. 主应用（Vue3）集成子应用

​





​

2. 子应用通信（Vue2 发送事件）

// sub-app-vue2/src/components/PermissionMenu.vue
export default {
  methods: {
    selectMenu(menu) {
      // 向主应用发送菜单事件
      if (window.$wujie) {
        window.$wujie.bus.$emit('menu-change', menu);
      }
    }
  }
}

3. 子应用预加载（主应用优化白屏）

// src/utils/preload.js
import { preloadApp } from 'wujie-vue3';

export const preloadSubApps = () => {
  preloadApp({
    name: 'dashboard',
    url: 'http://localhost:7102',
    exec: true  // 提前执行子应用代码
  });
};

// 在应用初始化时调用
preloadSubApps();

三、子应用改造关键步骤

1. Vue2 子应用入口改造

// sub-app-vue2/src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

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

2. Vue3 子应用配置（Vite）

// sub-app-vue3/vite.config.js
export default defineConfig({
  base: '/child-dashboard/',  // 确保静态资源路径正确
  server: {
    port: 7102,
    headers: {
      'Access-Control-Allow-Origin': '*'  // 允许主应用跨域加载
    }
  }
});

四、避坑指南

1. 路由冲突解决

• 主应用路由配置：避免与子应用路径重叠

• ​
  // 主应用路由（Vue Router）
  {
    path: '/permission/*',
    component: () => import('@/views/SubApp.vue')
  }
  
  ​

• 子应用使用 history 模式

• // sub-app-vue2/src/router.js
  export default new VueRouter({
    mode: 'history',
    base: '/sub-permission/'  // 唯一路径前缀
  });

  2. 静态资源路径修正

• Vue2 子应用（Webpack）：设置 publicPath

• // vue.config.js
  module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/sub-permission/' : '/',
  };

  3. 保活模式缓存清理

• // 主应用在切换子应用时重置状态
  

  五、扩展功能实现

  1. 跨应用状态共享（Pinia）

  // 主应用创建全局状态
  // src/stores/global.js
  export const useGlobalStore = defineStore('global', {
    state: () => ({ user: 'admin' }),
  });
  
  // 子应用通过 props 获取状态
  

  2. 子应用嵌套（多层微前端）

• // 在 Vue2 子应用中嵌入另一个 React 子应用
  // sub-app-vue2/src/components/ReactWrapper.vue