当前位置：首页 > VUE

微前端 vue实现

2026-01-15 04:14:15VUE

微前端架构概述

微前端是一种将多个独立前端应用组合成一个整体的架构模式，适用于大型项目或团队协作。Vue 作为主流框架之一，可通过多种方式实现微前端方案。

基于 Single-SPA 的实现

Single-SPA 是一个微前端框架，支持 Vue、React 等多种技术栈的集成。

安装依赖

npm install single-spa single-spa-vue

配置主应用（基座）
在主应用中注册子应用：

// main.js
import { registerApplication, start } from 'single-spa';

registerApplication({
  name: 'vue-app',
  app: () => System.import('@org/vue-app'), // 子应用入口
  activeWhen: '/vue',
});

start();

配置子应用
子应用需导出生命周期钩子：

// main.js (子应用)
import singleSpaVue from 'single-spa-vue';
import Vue from 'vue';
import App from './App.vue';

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    render: (h) => h(App),
    el: '#vue-app', // 与主应用容器ID匹配
  },
});

export const { bootstrap, mount, unmount } = vueLifecycles;

基于 Module Federation 的实现

Webpack 5 的 Module Federation 支持模块共享，适合微前端场景。

微前端 vue实现

主应用配置

// webpack.config.js (主应用)
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        vueApp: 'vueApp@http://localhost:3001/remoteEntry.js',
      },
    }),
  ],
};

子应用配置

// webpack.config.js (子应用)
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'vueApp',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/main.js',
      },
    }),
  ],
};

动态加载子应用
在主应用中使用动态导入：

const { mount } = await import('vueApp/App');
mount('#vue-app');

基于 Qiankun 的实现

Qiankun 是基于 Single-SPA 的封装，提供更简单的 API。

微前端 vue实现

主应用配置

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'vue-app',
    entry: '//localhost:8080',
    container: '#vue-container',
    activeRule: '/vue',
  },
]);

start();

子应用配置
子应用需导出生命周期钩子：

// main.js (子应用)
export async function bootstrap() {}
export async function mount(props) {
  new Vue({ render: h => h(App) }).$mount(props.container);
}
export async function unmount() {}