前端微应用（Vue3、React、Angular、Svelte）与 Single SPA 集成配置详解

前端微应用（Vue3、React、Angular、Svelte）与 Single SPA 集成配置详解

在前端微应用架构中，每个微应用都是一个独立的、可单独部署的模块，能够拥有自己的配置文件和技术栈。当多个微应用被集成到一个统一的框架中时，它们通过某些技术进行交互和集成。在这里，我们详细讲解如何为不同的前端微应用进行配置，并确保它们能够无缝协作。我们将展示 Vue3、React、Angular 和 Svelte 微应用的配置方式。

1. 配置 Vue3 微应用

1.1 项目结构

Vue3 微应用通常会使用 Vue CLI 或 Vite 来初始化。假设我们使用 Vite 作为开发工具，项目结构如下：

personnelApp/
├── public/
│   └── index.html
├── src/
│   ├── main.js
│   ├── App.vue
│   └── router/
│       └── index.js
├── package.json
└── vite.config.js

1.2 安装依赖

npm install vue@next vue-router single-spa-vue

1.3 配置 Webpack 和 Single SPA

Vue3 微应用的核心是 single-spa-vue，它允许 Vue 应用与其他微应用进行集成。首先，需要配置 Webpack（或 Vite）来暴露微应用。以下是 vite.config.js 配置的示例：

// vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createVuePlugin } from 'vite-plugin-single-spa';

export default defineConfig({
  plugins: [vue(), createVuePlugin()],
  build: {
    lib: {
      entry: 'src/main.js',
      name: 'personnelApp',
      fileName: (format) => `personnel-app.${format}.js`,
    },
    rollupOptions: {
      external: ['vue', 'vue-router'], // 需要外部化的库
      output: {
        globals: {
          vue: 'Vue', // Vue 对象通过全局变量暴露
          'vue-router': 'VueRouter',
        },
      },
    },
  },
});

1.4 配置路由

// src/router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import EmployeeList from '../components/EmployeeList.vue';

const routes = [
  {
    path: '/',
    name: 'EmployeeList',
    component: EmployeeList,
  },
];

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

export default router;

1.5 主入口文件配置

// src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

// 导出微应用供 Single SPA 加载
export const mount = (props) => {
  app.mount(props.domElement || '#app');
};

export const unmount = () => {
  app.unmount();
};

---

2. 配置 React 微应用

2.1 项目结构

React 微应用的项目结构如下：

equipmentApp/
├── public/
│   └── index.html
├── src/
│   ├── index.js
│   ├── App.js
│   └── routes/
│       └── EquipmentDashboard.js
├── package.json
└── webpack.config.js

2.2 安装依赖

npm install react react-dom react-router-dom single-spa-react

2.3 配置 Webpack 和 Single SPA

React 微应用需要配置 Webpack 来将它暴露给 Single SPA。以下是 webpack.config.js 的配置示例：

// webpack.config.js

const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'personnel-app.js',
    publicPath: 'auto',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'equipmentApp',
      library: { type: 'var', name: 'equipmentApp' },
      remotes: {},
      exposes: {
        './main': './src/index.js',
      },
      shared: ['react', 'react-dom', 'react-router-dom'],
    }),
  ],
};

2.4 配置路由

// src/routes/EquipmentDashboard.js

import React from 'react';

const EquipmentDashboard = () => {
  return <div>设备监控 Dashboard</div>;
};

export default EquipmentDashboard;

2.5 主入口文件配置

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';

const mount = (props) => {
  ReactDOM.render(
    <Router>
      <App />
    </Router>,
    props.domElement || document.getElementById('app')
  );
};

const unmount = () => {
  ReactDOM.unmountComponentAtNode(document.getElementById('app'));
};

export { mount, unmount };

---

3. 配置 Angular 微应用

3.1 项目结构

Angular 微应用的项目结构如下：

safetyApp/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   └── app.module.ts
├── package.json
├── angular.json
├── webpack.config.js
└── main.ts

3.2 安装依赖

npm install @angular/core @angular/router single-spa-angular

3.3 配置 Webpack 和 Single SPA

Angular 项目的 Webpack 配置通过 single-spa-angular 插件实现：

// webpack.config.js

const SingleSpaAngularWebpackPlugin = require('single-spa-angular/webpack');
const { AngularWebpackPlugin } = require('@ngtools/webpack');

module.exports = {
  entry: './src/main.ts',
  plugins: [
    new SingleSpaAngularWebpackPlugin({
      bootstrapModule: 'app.module.ts',
    }),
    new AngularWebpackPlugin(),
  ],
};

3.4 配置主入口文件

// src/main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { singleSpaAngular } from 'single-spa-angular';

if (process.env.NODE_ENV === 'production') {
  enableProdMode();
}

const mount = (props) => {
  platformBrowserDynamic().bootstrapModule(AppModule).then((moduleRef) => {
    // Single-SPA 加载时传入的属性（如 domElement）可以传递给 Angular 应用
  });
};

export { mount };

---

4. 配置 Svelte 微应用

4.1 项目结构

Svelte 微应用的项目结构如下：

progressApp/
├── src/
│   ├── main.js
│   └── App.svelte
├── package.json
├── rollup.config.js
└── public/
    └── index.html

4.2 安装依赖

npm install svelte single-spa-svelte

4.3 配置 Rollup 和 Single SPA

// rollup.config.js

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { singleSpaSvelte } from 'single-spa-svelte';

export default {
  input: 'src/main.js',
  output: {
    file: 'public/build/bundle.js',
    format: 'iife',
  },
  plugins: [
    svelte(),
    resolve(),
    commonjs(),
    singleSpaSvelte(),
  ],
};

4.4 配置主入口文件

// src/main.js

import App from './App.svelte';

const app = new App({
  target: document.getElementById('app'),
});

export { app };

---

总结

上述是不同前端微应用（Vue3、React、Angular 和 Svelte）的配置方式。每种微应用在与 Single SPA 集成时，都需要做一些特定的配置，如 Webpack、Rollup 配置、路由管理以及主入口文件的处理。这些配置确保了每个微应用的独立性、可维护性和可扩展性，同时也能通过 Single SPA 将它们无缝集成到主应用中。