从零开始构建qiankun+vue微前端应用：超越iframe，拥抱隔离的无限可能

2023-10-18 18:30:26

微前端：以 Qiankun + Vue 为基石的模块化应用架构

在现代前端开发领域，微前端架构已经成为一种流行的模式，它以模块化、高性能和灵活性等优势著称。这篇文章将探讨如何使用 Qiankun 和 Vue 来构建一个微前端应用，并深入了解微前端隔离方案中的 iframe 的作用和 Qiankun 的独特优势。

iframe：隔离的守护者

Iframe（内嵌框架）是 HTML 中用于嵌入另一个文档的窗口。在微前端中，iframe 被用作一种隔离方案，可以解决不同应用模块之间的样式冲突、JS 冲突等问题。然而，iframe 的最大局限在于其无法突破的隔离性，导致了跨域通信、资源共享等方面的挑战。

Qiankun：超越隔离的边界

Qiankun 的出现打破了 iframe 的限制，为微前端隔离带来了新的希望。它采用了一种沙箱机制，将不同的应用模块隔离在各自的沙箱中，从而实现了真正的隔离。Qiankun 允许您自由组合不同的应用模块，并通过事件通信、状态管理等方式实现模块之间的协作，大大提升了微前端应用的灵活性。

实战：构建 Qiankun + Vue 微前端应用

1. 初始化项目

安装 Node.js 和 Vue CLI。
创建一个新的 Vue 项目。
安装 Qiankun 和 vue-router。

npm install --save qiankun vue-router

2. 配置 Qiankun

在 main.js 中配置 Qiankun。

import { createApp } from 'vue';
import { qiankunWindow } from 'qiankun';

const app = createApp();

// 注册主应用
qiankunWindow.registerApp({
  name: 'main',
  entry: '/main.js',
  container: '#container',
  activeRule: '/'
});

app.mount('#app');

3. 开发子应用

创建一个子应用的 Vue 项目。
在子应用的 main.js 中配置 Qiankun。

import { createApp } from 'vue';
import { qiankunWindow } from 'qiankun';

const app = createApp();

// 注册子应用
qiankunWindow.registerApp({
  name: 'sub',
  entry: '/sub.js',
  container: '#sub-container',
  activeRule: '/sub'
});

app.mount('#sub-app');

4. 集成子应用

在主应用中注册子应用。

// main.js
qiankunWindow.registerApp({
  name: 'sub',
  entry: 'http://localhost:7100/sub.js', // 子应用入口地址
  container: '#sub-container',
  activeRule: '/sub'
});

在主应用的路由表中添加子应用的路由规则。

// router.js
import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      component: MainApp
    },
    {
      path: '/sub',
      component: () => qiankunWindow.loadApp('sub') // 动态加载子应用
    }
  ]
});