// 主应用路由配置
import { registerApplication, start } from 'single-spa';

// 注册微应用
registerApplication(
  'vue-app',
  () => import('vue-app/main.js'),
  (location) => location.pathname.startsWith('/vue'),
  { /* 自定义属性 */ }
);

registerApplication(
  'react-app',
  () => import('react-app/main.js'),
  (location) => location.pathname.startsWith('/react'),
  { /* 自定义属性 */ }
);

// 启动应用
start();

2.2 组件嵌入式

组件嵌入式将微应用作为组件嵌入到主应用中，主应用可以根据需要动态加载和渲染这些组件。

工作原理

微应用打包成独立的组件库
主应用通过import或动态加载的方式使用这些组件
组件运行在主应用的上下文中

优缺点

优点：

可以实现更细粒度的拆分
适合需要复杂交互的场景

缺点：

技术栈受限（需要主应用支持的技术栈）
耦合度相对较高

示例代码

// 主应用中使用微应用组件
import { createApp } from 'vue';
import App from './App.vue';
import VueMicroApp from 'vue-micro-app';
import ReactMicroApp from 'react-micro-app';

const app = createApp(App);

app.component('vue-micro-app', VueMicroApp);
app.component('react-micro-app', ReactMicroApp);

app.mount('#app');

2.3 iframe式

iframe式是最传统的微前端实现方式，每个微应用运行在独立的iframe中。

工作原理

主应用通过iframe标签加载微应用
每个微应用拥有独立的DOM环境和JavaScript上下文
通过postMessage进行通信

优缺点

优点：

完全隔离（样式、JS、DOM）
实现简单
兼容性好

缺点：

性能开销大
通信复杂
页面跳转体验差
无法共享公共资源

示例代码

<!-- 主应用中使用iframe加载微应用 -->
<div id="micro-app-container">
  <iframe 
    id="vue-app" 
    src="http://localhost:8081" 
    style="width: 100%; height: 500px; border: none;"
  ></iframe>
  <iframe 
    id="react-app" 
    src="http://localhost:8082" 
    style="width: 100%; height: 500px; border: none;"
  ></iframe>
</div>

<script>
// 通过postMessage通信
const vueIframe = document.getElementById('vue-app');

// 发送消息到微应用
vueIframe.contentWindow.postMessage({ 
  type: 'DATA_UPDATE', 
  payload: { user: 'admin' } 
}, 'http://localhost:8081');

// 接收微应用的消息
window.addEventListener('message', (event) => {
  if (event.origin === 'http://localhost:8081') {
    console.log('Received message from Vue app:', event.data);
  }
});
</script>

3. 主流微前端框架

3.1 Single-SPA

Single-SPA是最早的微前端框架之一，它提供了一种机制来管理多个JavaScript微应用的生命周期。

核心特性

技术栈无关
支持多种框架（React、Vue、Angular等）
路由管理
生命周期管理

基本使用

// 注册应用
import { registerApplication, start } from 'single-spa';

registerApplication(
  'my-app',
  () => import('./my-app/main.js'),
  (location) => location.pathname.startsWith('/my-app'),
  { customProp: 'value' }
);

start();

微应用实现

// my-app/main.js
export async function bootstrap() {
  console.log('my-app bootstraped');
}

export async function mount(props) {
  console.log('my-app mounted with props:', props);
  // 渲染应用
}

export async function unmount(props) {
  console.log('my-app unmounted');
  // 卸载应用
}

3.2 Qiankun（乾坤）

Qiankun是基于Single-SPA的微前端框架，由蚂蚁金服开发，提供了更完善的功能和更好的开发体验。

核心特性

简单易用的API
自动沙箱隔离
样式隔离
预加载
资源共享
完善的错误处理

主应用配置

import { registerMicroApps, start } from 'qiankun';

// 注册微应用
registerMicroApps([
  {
    name: 'vue-app',
    entry: '//localhost:8081',
    container: '#micro-container',
    activeRule: '/vue'
  },
  {
    name: 'react-app',
    entry: '//localhost:8082',
    container: '#micro-container',
    activeRule: '/react'
  }
]);

// 启动微前端应用
start();

微应用配置（Vue）

// vue.config.js
module.exports = {
  devServer: {
    port: 8081,
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  configureWebpack: {
    output: {
      library: 'vue-app',
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${name}`
    }
  }
};

// src/main.js
let instance = null;

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

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

// 导出生命周期函数
export async function bootstrap() {
  console.log('vue app bootstraped');
}

export async function mount(props) {
  console.log('vue app mount with props:', props);
  render(props);
}

export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}

3.3 Micro-App

Micro-App是京东开源的微前端框架，基于Web Components思想，提供了更轻量级的实现。

核心特性

零配置
原生JS实现，体积小
自动沙箱隔离
支持预加载
完善的API

主应用配置

// 安装依赖
// npm install @micro-zoe/micro-app --save

// main.js
import microApp from '@micro-zoe/micro-app';
import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

// 初始化 micro-app
microApp.start();

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

// App.vue
<template>
  <div>
    <h1>主应用</h1>
    <router-link to="/">首页</router-link>
    <router-link to="/vue-app">Vue应用</router-link>
    <router-link to="/react-app">React应用</router-link>
    
    <div id="micro-container">
      <!-- 渲染微应用 -->
      <micro-app 
        v-if="$route.path.startsWith('/vue-app')" 
        name="vue-app" 
        url="http://localhost:8081/" 
        baseroute="/vue-app"
      ></micro-app>
      <micro-app 
        v-if="$route.path.startsWith('/react-app')" 
        name="react-app" 
        url="http://localhost:8082/" 
        baseroute="/react-app"
      ></micro-app>
    </div>
  </div>
</template>

微应用配置

// Vue微应用配置（vue.config.js）
module.exports = {
  devServer: {
    port: 8081,
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  }
};

// React微应用配置（webpack.config.js）
module.exports = {
  devServer: {
    port: 8082,
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  output: {
    publicPath: 'http://localhost:8082/'
  }
};

4. 微前端实战（基于Qiankun）

4.1 环境准备

# 安装Node.js和npm
# 创建主应用目录
mkdir qiankun-main && cd qiankun-main
# 初始化主应用（Vue 3）
npm create vite@latest . -- --template vue
# 安装qiankun
npm install qiankun --save

# 创建Vue微应用目录
mkdir ../qiankun-vue-app && cd ../qiankun-vue-app
# 初始化Vue微应用
npm create vite@latest . -- --template vue

# 创建React微应用目录
mkdir ../qiankun-react-app && cd ../qiankun-react-app
# 初始化React微应用
npm create vite@latest . -- --template react

4.2 主应用配置

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { registerMicroApps, start } from 'qiankun'

createApp(App).use(router).mount('#app')

// 注册微应用
registerMicroApps([
  {
    name: 'vue-app',
    entry: '//localhost:5174',
    container: '#micro-container',
    activeRule: '/vue'
  },
  {
    name: 'react-app',
    entry: '//localhost:5175',
    container: '#micro-container',
    activeRule: '/react'
  }
])

// 启动微前端应用
start()

<!-- App.vue -->
<template>
  <div>
    <h1>Qiankun Main App</h1>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/vue">Vue App</router-link>
      <router-link to="/react">React App</router-link>
    </nav>
    <div id="micro-container"></div>
  </div>
</template>

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    }
  ]
})

export default router

4.3 Vue微应用配置

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 5174,
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  build: {
    rollupOptions: {
      output: {
        format: 'umd',
        name: 'vue-app',
        entryFileNames: 'main.js',
        amd: {
          id: 'vue-app'
        }
      }
    }
  }
})

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

let instance = null

function render(props = {}) {
  const { container } = props
  instance = createApp(App)
  instance.use(router)
  instance.mount(container ? container.querySelector('#app') : '#app')
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

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

export async function mount(props) {
  console.log('Vue app mount with props:', props)
  render(props)
}

export async function unmount() {
  console.log('Vue app unmount')
  instance.unmount()
  instance = null
}

4.4 React微应用配置

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 5175,
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  build: {
    rollupOptions: {
      output: {
        format: 'umd',
        name: 'react-app',
        entryFileNames: 'main.js',
        amd: {
          id: 'react-app'
        }
      }
    }
  }
})

// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

let root = null

function render(props = {}) {
  const { container } = props
  root = ReactDOM.createRoot(container ? container.querySelector('#root') : document.getElementById('root'))
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  )
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

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

export async function mount(props) {
  console.log('React app mount with props:', props)
  render(props)
}

export async function unmount() {
  console.log('React app unmount')
  root.unmount()
  root = null
}

5. 微前端关键问题与解决方案

5.1 样式隔离

CSS Modules

/* styles.module.css */
.container {
  color: red;
}

// 使用CSS Modules
import styles from './styles.module.css'

function Component() {
  return <div className={styles.container}>Content</div>
}

Shadow DOM

// 创建Shadow DOM
const shadowHost = document.getElementById('shadow-host');
const shadowRoot = shadowHost.attachShadow({ mode: 'open' });

// 添加样式
const style = document.createElement('style');
style.textContent = `
  div {
    color: blue;
  }
`;
shadowRoot.appendChild(style);

// 添加内容
const div = document.createElement('div');
div.textContent = 'Shadow DOM Content';
shadowRoot.appendChild(div);

Qiankun的样式隔离

// 主应用中配置
import { start } from 'qiankun';

start({
  sandbox: {
    strictStyleIsolation: true // 严格样式隔离
  }
});

5.2 状态管理

基于Props的状态传递

// 主应用
registerMicroApps([
  {
    name: 'vue-app',
    entry: '//localhost:5174',
    container: '#micro-container',
    activeRule: '/vue',
    props: { 
      userInfo: { name: 'admin' },
      onUserChange: (user) => console.log('User changed:', user) 
    }
  }
]);

全局状态管理（基于发布-订阅模式）

// 状态管理工具
class EventBus {
  constructor() {
    this.events = {};
  }

  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }

  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  }

  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
}

// 实例化
export default new EventBus();

// 主应用中使用
import eventBus from './eventBus';
eventBus.emit('userInfoChange', { name: 'admin' });

// 微应用中使用
import eventBus from './eventBus';
eventBus.on('userInfoChange', (userInfo) => {
  console.log('Received user info:', userInfo);
});

5.3 路由管理

路由前缀

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

const router = createRouter({
  history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/vue' : import.meta.env.BASE_URL),
  routes: [
    // ...
  ]
})

路由守卫

// 主应用路由守卫
router.beforeEach((to, from, next) => {
  // 处理微应用路由
  next()
})

// 微应用路由守卫
router.beforeEach((to, from, next) => {
  if (window.__POWERED_BY_QIANKUN__) {
    // 微应用环境下的特殊处理
  }
  next()
})