全景了解微前端架构利器：如何将 Qiankun 巧妙集成于您的系统之中？

前端

2023-09-07 01:32:37

微前端架构与 Qiankun 简介

微前端架构是一种将大型单体应用拆分为多个独立、可独立开发和部署的小型应用的软件架构模式。这种架构模式可以提高应用的可扩展性、灵活性、可维护性和可重用性。

Qiankun 是一个流行的微前端框架，它提供了一套完整的工具和解决方案，帮助您轻松构建微前端应用。Qiankun 具有灵活的集成方式，支持多种场景，如 Qiankun 宿主、Iframe、子应用独立部署等。

Qiankun 集成方案

方案一：Qiankun 宿主

Qiankun 宿主方案是指将 Qiankun 集成到现有的单体应用中，使单体应用能够加载和运行微前端应用。这种方案适合于希望将微前端应用集成到现有系统中的场景。

集成步骤：

安装 Qiankun 和相关依赖：

npm install qiankun --save

创建一个 Qiankun 宿主应用：

import { createApp, mount } from 'vue'
import { Qiankun } from 'qiankun'

const app = createApp({})

const instance = mount(app, '#app')

const qiankun = new Qiankun({
  // 应用的名称
  appName: 'sub-app',
  // 应用的入口文件
  entry: '//localhost:7100/app.js',
})

qiankun.mount(instance.$el)

运行 Qiankun 宿主应用：

npm run serve

注意：

Qiankun 宿主应用需要有一个 HTML 入口文件，该文件需要包含一个 <div id="app"></div> 元素，作为微前端应用的挂载点。
Qiankun 宿主应用需要配置微前端应用的入口文件和名称。
Qiankun 宿主应用需要运行在与微前端应用相同的协议和端口上。

方案二：Iframe

Iframe 方案是指将微前端应用嵌入到现有系统的某个 Iframe 中。这种方案适合于希望将微前端应用集成到现有页面中的场景。

集成步骤：

在现有页面中创建一个 Iframe：

<iframe id="sub-app" src="http://localhost:7100/app.html"></iframe>

将 Qiankun 集成到现有页面中：

import { createApp, mount } from 'vue'
import { Qiankun } from 'qiankun'

const app = createApp({})

const instance = mount(app, '#app')

const qiankun = new Qiankun({
  // 应用的名称
  appName: 'sub-app',
  // 应用的入口文件
  entry: '#sub-app',
})

qiankun.mount()

运行现有页面：

npm run serve

注意：

Iframe 方案需要在现有页面中创建一个 Iframe，并指定微前端应用的 URL。
Qiankun 需要集成到现有页面中，并配置微前端应用的名称和入口文件。
微前端应用需要运行在与现有页面相同的协议和端口上。

方案三：子应用独立部署

子应用独立部署方案是指将微前端应用独立部署到不同的服务器上。这种方案适合于希望将微前端应用与现有系统解耦的场景。

集成步骤：

将微前端应用部署到服务器上。
在现有系统中配置微前端应用的 URL。
将 Qiankun 集成到现有系统中：

import { createApp, mount } from 'vue'
import { Qiankun } from 'qiankun'

const app = createApp({})

const instance = mount(app, '#app')

const qiankun = new Qiankun({
  // 应用的名称
  appName: 'sub-app',
  // 应用的入口文件
  entry: '//localhost:7100/app.js',
})

qiankun.mount()

运行现有系统：

npm run serve

注意：

子应用独立部署方案需要将微前端应用部署到服务器上。
Qiankun 需要集成到现有系统中，并配置微前端应用的名称和入口文件。
微前端应用需要运行在与现有系统相同的协议和端口上。

总结

本文介绍了三种常见的 Qiankun 集成方案，包括 Qiankun 宿主、Iframe 和子应用独立部署。通过这些方案，您可以在不同的场景下将 Qiankun 集成到您的系统中，从而构建更灵活、可扩展的应用架构。

在实际应用中，您需要根据具体的场景选择合适的集成方案。例如，如果您希望将微前端应用集成到现有的单体应用中，那么您可以选择 Qiankun 宿主方案。如果您希望将微前端应用集成到现有页面的某个 Iframe 中，那么您可以选择 Iframe 方案。如果您希望将微前端应用与现有系统解耦，那么您可以选择子应用独立部署方案。