当前位置：首页 > VUE

vue怎么实现微前端

2026-01-22 17:13:25VUE

vue实现微前端的常见方法

使用qiankun框架

qiankun是基于single-spa的微前端解决方案，支持Vue项目作为主应用或子应用。主应用通过注册子应用的方式加载不同技术栈的微应用。

主应用配置示例：

import { registerMicroApps, start } from 'qiankun';

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

start();

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

vue怎么实现微前端

export async function bootstrap() {
  console.log('vue app bootstraped');
}

export async function mount(props) {
  render(props);
}

export async function unmount() {
  instance.$destroy();
}

基于Webpack Module Federation

Webpack5的模块联邦特性可以实现组件级共享，适合Vue3项目。

配置示例：

vue怎么实现微前端

// host应用webpack配置
new ModuleFederationPlugin({
  name: 'host',
  remotes: {
    app1: 'app1@http://localhost:3001/remoteEntry.js'
  }
});

// remote应用配置
new ModuleFederationPlugin({
  name: 'app1',
  filename: 'remoteEntry.js',
  exposes: {
    './Button': './src/components/Button.vue'
  }
});

iframe嵌套方案

通过iframe加载子应用，实现完全隔离：

<iframe 
  src="http://child-app.com" 
  frameborder="0"
  style="width:100%;height:100%"
></iframe>

基于Vue自定义元素

Vue3支持将组件编译为Web Components：

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // 正常Vue组件选项
})

customElements.define('my-vue-element', MyVueElement)

路由分发方案

通过不同路由加载不同子应用：

const routes = [
  {
    path: '/app1/*',
    component: () => import('./App1Wrapper.vue')
  },
  {
    path: '/app2/*',
    component: () => import('./App2Wrapper.vue')
  }
]