深探qiankun改造无星微前端的三重境界

前端

2023-12-15 06:57:42

前言

随着前端应用日益复杂，微前端架构逐渐成为一种流行的前端架构设计模式。微前端架构将应用拆分为多个独立的子应用，每个子应用都有自己的代码库、构建流程和部署流程。这种架构模式的好处在于，它可以提高前端应用的可维护性、可扩展性和可复用性。

无星微前端架构是微前端架构的一种，它将主应用与子应用完全解耦，子应用不再依赖主应用的任何代码和资源。这使得子应用可以更加独立地开发和维护，也使得主应用可以更加灵活地集成不同的子应用。

本文将详细介绍如何通过qiankun改造实现无星微前端架构。qiankun是一个开源的微前端框架，它提供了丰富的功能和完善的文档，可以帮助开发者快速构建无星微前端应用。

一、qiankun介绍

qiankun是一个基于single-spa规范的微前端框架，它支持多种微前端架构模式，包括无星微前端架构。qiankun具有以下特点：

简单易用： qiankun提供了丰富的API和完善的文档，可以帮助开发者快速构建微前端应用。
性能卓越： qiankun采用高效的通信协议和缓存机制，可以确保微前端应用的高性能。
稳定可靠： qiankun经过了严格的测试和验证，可以确保微前端应用的稳定性。

二、qiankun改造无星微前端架构

1. 初始化主应用

首先，我们需要初始化主应用。主应用负责加载和管理子应用。我们可以使用以下代码初始化主应用：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:3001',
    container: '#app1',
  },
  {
    name: 'app2',
    entry: '//localhost:3002',
    container: '#app2',
  },
]);

start();

2. 开发子应用

接下来，我们需要开发子应用。子应用是独立的应用，它们可以单独开发和部署。我们可以使用以下代码开发子应用：

import { createApp } from 'vue';

const app = createApp({
  template: `
    <div>
      <h1>子应用</h1>
    </div>
  `,
});

app.mount('#app');

3. 部署子应用

子应用开发完成后，我们需要将其部署到服务器上。我们可以使用以下命令部署子应用：

npm run build

部署完成后，我们可以访问子应用的地址来查看子应用。

4. 集成子应用

子应用部署完成后，我们需要将其集成到主应用中。我们可以使用以下代码集成子应用：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:3001/build',
    container: '#app1',
  },
  {
    name: 'app2',
    entry: '//localhost:3002/build',
    container: '#app2',
  },
]);

start();

集成完成后，我们可以访问主应用的地址来查看子应用。

三、hash模式下的qiankun改造

在默认情况下，qiankun使用history模式来管理子应用的路由。但是，有些情况下，我们需要使用hash模式来管理子应用的路由。我们可以使用以下代码在hash模式下初始化主应用：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:3001/#/app1',
    container: '#app1',
  },
  {
    name: 'app2',
    entry: '//localhost:3002/#/app2',
    container: '#app2',
  },
]);

start({
  prefetch: false,
});

在hash模式下，子应用的路由需要使用hash来管理。我们可以使用以下代码在子应用中使用hash路由：

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: () => import('./App.vue'),
    },
  ],
});

export default router;