当前位置：首页 > VUE

vue 微前端实现

2026-01-19 00:15:42VUE

Vue 微前端实现方案

微前端架构允许将多个独立的前端应用组合成一个整体。以下是基于 Vue 的常见实现方案：

基于 `qiankun` 的微前端方案

qiankun 是一个成熟的微前端框架，支持 Vue 应用作为主应用或子应用。

主应用配置：

import { registerMicroApps, start } from 'qiankun';

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

start();

子应用配置（Vue 子应用需要暴露生命周期钩子）：

// main.js
import Vue from 'vue';
import App from './App.vue';

let instance = null;

function render(props = {}) {
  instance = new Vue({
    render: h => h(App),
  }).$mount('#app');
}

if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {}
export async function mount(props) { render(props); }
export async function unmount() { instance.$destroy(); }

基于 `Module Federation` 的 Webpack 5 方案

Webpack 5 的模块联邦特性可以实现更灵活的微前端架构。

主应用配置：

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

子应用配置：

// webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button.vue',
      },
    }),
  ],
};

基于 `single-spa` 的方案

single-spa 是更底层的微前端框架，需要更多手动配置。

主应用注册：

import { registerApplication, start } from 'single-spa';

registerApplication({
  name: 'vue-app',
  app: () => System.import('vue-app'),
  activeWhen: ['/vue-app'],
});

start();

Vue 子应用适配器：

import './set-public-path';
import Vue from 'vue';
import App from './App.vue';

const vueLifecycles = {
  bootstrap: async () => {
    console.log('vue app bootstrap');
  },
  mount: async () => {
    new Vue({
      render: h => h(App),
    }).$mount('#vue-app');
  },
  unmount: async () => {
    document.getElementById('vue-app').innerHTML = '';
  },
};

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

样式隔离方案

微前端需要处理样式隔离问题，常见解决方案：

使用 Shadow DOM

// 子应用挂载时
const shadow = this.$el.attachShadow({ mode: 'open' });
const app = document.createElement('div');
shadow.appendChild(app);
new Vue({ el: app });

使用 CSS 命名空间

/* 子应用样式文件 */
.vue-sub-app .container {
  /* 样式规则 */
}

状态管理共享

微前端应用间共享状态的常见方式：

使用自定义事件

// 主应用
window.dispatchEvent(new CustomEvent('global-event', { detail: data }));

// 子应用
window.addEventListener('global-event', handler);

使用 redux 或 vuex 共享 store

// 主应用初始化 store
const store = createStore(reducer);

// 子应用接入
if (window.parent.store) {
  Vue.prototype.$store = window.parent.store;
}

路由管理方案

处理微前端间的路由冲突：

主应用使用 history 路由

const router = new VueRouter({
  mode: 'history',
  base: '/main-app',
});

子应用使用 hash 路由或指定 base

const router = new VueRouter({
  mode: 'history',
  base: '/sub-app',
});

构建与部署注意事项

独立构建子应用

# 子应用 package.json
"build": "vue-cli-service build --dest dist/sub-app"

主应用配置代理避免跨域

vue 微前端实现

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/sub-app': {
        target: 'http://localhost:7101',
        changeOrigin: true,
      },
    },
  },
};

以上方案可根据项目需求组合使用，qiankun 提供了最完整的解决方案，Module Federation 适合 Webpack 5 项目，single-spa 则提供更多自定义空间。

标签: vue