用 iframe 实现微前端架构实战

2023-12-25 05:43:56







最近看到了好几篇与微前端相关的文章，对于微前端的架构基本都提到了 iframe 方式，但最终也没看到那篇文章最后选择了 iframe 架构。既然如此，那我就来试试看用 iframe 实现微前端怎么样。项目可以分为两部分，一部分是统一的登陆注册入口，一分部是主要的管理内容区。

## 架构设计

iframe 微前端架构的整体设计如下：

* **主应用** ：负责加载和管理微前端应用。
* **微前端应用** ：独立的模块，可以独立开发、部署和维护。
* **通信机制** ：用于微前端应用之间的数据通信。

## 实现

### 主应用

主应用负责加载和管理微前端应用。主应用可以是一个简单的 HTML 页面，也可以是一个复杂的单页面应用。

```html
<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <div id="app"></div>
    <script src="main.js"></script>
  </body>
</html>

// main.js
import { createMicroFrontendEngine } from 'micro-frontend-engine';

const engine = createMicroFrontendEngine({
  container: '#app',
});

engine.registerApp('app1', {
  url: 'http://localhost:3001',
});

engine.registerApp('app2', {
  url: 'http://localhost:3002',
});

engine.start();

微前端应用

微前端应用是独立的模块，可以独立开发、部署和维护。微前端应用可以是一个简单的 HTML 页面，也可以是一个复杂的单页面应用。

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <h1>微前端应用</h1>
    <script src="main.js"></script>
  </body>
</html>

// main.js
import { createMicroFrontend } from 'micro-frontend';

const microFrontend = createMicroFrontend({
  url: 'http://localhost:3001',
});

microFrontend.mount();