Vue3组件革命：动态模块联邦与微前端架构深度实践

文章小助手 vue3

2025-07-14 0 902

Vue3组件革命：动态模块联邦与微前端架构深度实践

一、模块联邦架构设计

宿主应用

• 动态加载远程模块

• 提供共享依赖

• 路由集成

远程模块

• 独立构建部署

• 暴露组件/路由

• 版本控制

共享层

• Vue3运行时共享

• 状态管理同步

• 公共工具库

// 宿主应用配置 (vite.config.js)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from '@originjs/vite-plugin-federation'

export default defineConfig({
  plugins: [
    vue(),
    federation({
      name: 'host-app',
      remotes: {
        product: 'http://localhost:5001/assets/product.js',
        user: 'http://localhost:5002/assets/user.js'
      },
      shared: ['vue', 'pinia', 'vue-router']
    })
  ]
})

二、动态组件加载系统

1. 运行时组件解析

// 动态组件加载器
const componentCache = new Map()

async function loadComponent(moduleName, componentName) {
  const cacheKey = `${moduleName}:${componentName}`
  
  if (componentCache.has(cacheKey)) {
    return componentCache.get(cacheKey)
  }

  // 动态加载远程模块
  const container = await window[moduleName].get('./entry')
  const factory = await container.get(`./${componentName}`)
  const Component = factory()
  
  // 缓存组件
  componentCache.set(cacheKey, Component)
  return Component
}

// 使用示例
const ProductList = await loadComponent('product', 'ProductList')

2. 版本兼容层

// 版本适配器
function createVersionBridge(sharedDeps) {
  return {
    vue: wrapVue(sharedDeps.vue),
    pinia: wrapPinia(sharedDeps.pinia)
  }
}

function wrapVue(vue) {
  // 提供统一的Vue兼容接口
  return {
    createApp: vue.createApp,
    defineComponent: vue.defineComponent,
    version: vue.version,
    // 其他需要共享的API
  }
}

// 远程模块入口
export async function init(shared) {
  const bridge = createVersionBridge(shared)
  window.__SHARED__ = bridge
  return import('./bootstrap')
}

三、企业级门户实战

微前端门户架构实现

// 主应用路由配置
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/products/*',
    component: () => import('./layouts/MicroLayout.vue'),
    children: [
      {
        path: '',
        component: () => loadMicroRoute('product', 'ProductRouter')
      }
    ]
  },
  {
    path: '/users/*',
    component: () => import('./layouts/MicroLayout.vue'),
    children: [
      {
        path: '',
        component: () => loadMicroRoute('user', 'UserRouter')
      }
    ]
  }
]

async function loadMicroRoute(moduleName, exportName) {
  const container = await window[moduleName].get('./router')
  const factory = await container.get(`./${exportName}`)
  return factory()
}

const router = createRouter({
  history: createWebHistory(),
  routes
})