微前端----qiankun(vue项目中实践)

2,919 阅读5分钟

微前端基本概念

微前端借鉴了微服务的架构理念,将一个庞大的前端应用拆分为多个独立灵活的小型应用,每个应用都可以独立开发、独立运行、独立部署,再将这些小型应用联合为一个完整的应用。微前端既可以将多个项目融合为一,又可以减少项目之间的耦合,提升项目扩展性,相比一整块的前端仓库,微前端架构下的前端仓库倾向于更小更灵活。

微前端的核心特点

  • 模块化:将大型前端应用拆分为多个小型模块,每个模块都是一个独立的微应用。
  • 独立开发:每个微应用可以由不同的团队独立开发,使用不同的技术栈。
  • 独立运行:微应用可以独立运行,通过前端路由和页面嵌入等技术实现模块之间的相互调用和通信。
  • 独立部署:微应用可以独立部署,无需整个应用重启即可更新单个微应用。
  • 技术栈无关性:允许使用不同的编程语言和框架进行开发,提高开发团队的灵活性。

微前端的实现方法

  • 基于路由的拆分:主应用根据路由的变化来加载和卸载不同的微应用。
  • Web Components:利用Web Components技术封装微应用,实现组件级别的隔离和复用。
  • iframe:通过iframe嵌入微应用,实现简单的隔离和加载。但iframe的隔离性较强,可能导致样式和脚本的冲突。
  • 库和框架支持:如single-spa、qiankun等库提供了微前端的实现框架和工具,帮助开发者更方便地构建微前端应用。

QianKun

Qiankun是由蚂蚁金服开源的一款基于single-spa的微前端实现库。它旨在通过微前端的方式,将大型前端应用拆分成多个小型、独立、可独立开发、测试和部署的子应用。每个子应用都拥有自己独立的生命周期和上下文环境,通过Qiankun的框架进行集成和管理,形成一个完整的用户界面。

项目实战

创建一个Vue2项目 不同于single-spa来实现微前端,我们用qiankun来搭建整个架构的时候,主应用(基座)是一个完整的项目。你可以选中用vue来搭建一个基座项目,也可以使用react或者umi等等。

再基座项目中,我们所有主页面、路由、权限都可以实现。子应用只负责对应自己的业务板块。

接下来我创建一个vue2的项目来作为我们基座应用。使用vue2来搭建相对比较简单,容易上手。

搭建项目基座

Vue2项目作为我们整个微前端项目的基座

(1)主应用下载插件

yarn add qiankun # 或者 npm i qiankun -S

(2)主应用中配置

base/src/qiankun/index.js

/**
 * 用于存放我们各个微应用的数组。
 * 以后有多少个微应用,这个数组中就会存放多少个对象
 */
const apps = [
  
];

import { message } from "element-ui";
import {
  registerMicroApps,
  addGlobalUncaughtErrorHandler,
  start,
} from "qiankun";

/**
 * 注册微应用
 * 第一个参数 - 微应用的注册信息
 * 第二个参数 - 全局生命周期钩子
 */
registerMicroApps(apps, {
  // qiankun 生命周期钩子 - 微应用加载前
  beforeLoad: (app) => {
    console.log("before load", app.name);
    return Promise.resolve();
  },
  // qiankun 生命周期钩子 - 微应用挂载后
  afterMount: (app) => {
    console.log("after mount", app.name);
    return Promise.resolve();
  },
});

/**
 * 添加全局的未捕获异常处理器
 */
addGlobalUncaughtErrorHandler((event) => {
  console.error(event);
  const { message: msg } = event;
  // 加载失败时提示
  if (msg && msg.includes("died in status LOADING_SOURCE_CODE")) {
    message.error("微应用加载失败,请检查应用是否可运行");
  }
});

// 导出 qiankun 的启动函数
export default start;

(3)加载qiankun的配置

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
import startQiankun from "./qiankun/index";

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')


startQiankun()

(4)配置微应用容器

<el-main>
    <!-- 主应用的渲染区域,用于挂载主应用触发的组件 -->
    <router-view v-show="$route.name"></router-view>
    <!-- 子应用渲染的区域,用于挂载Vue子应用节点 -->
    <div v-show="!$route.name" id="container"></div>
</el-main>

搭建Vue微应用

在创建好了 Vue 微应用后,我们可以开始我们的接入工作了。首先我们需要在主应用中注册该微应用的信息

base/src/qiankun/index.js

const apps = [
  /**
   * name: 微应用名称 - 具有唯一性
   * entry: 微应用入口 - 通过该地址加载微应用,保证微应用地址和端口正确
   * container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
   * activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用
   */
  {
    name: "VueApp",
    entry: "//localhost:8080",
    container: "#container",
    activeRule: "/vue",
  },
];

配置微应用启动方案及遇到的问题

// src/public-path.js
if (window.__POWERED_BY_QIANKUN__) {
    // eslint-disable-next-line camelcase, no-undef
    //注释指令可以用来临时禁用某些规则的检查,通常用于特定的情况下,例如你需要使用某个特殊命名规则或访问//全局变量时
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
  }
  

image.png

const { defineConfig } = require('@vue/cli-service')
`@vue/cli-service` 是 Vue CLI 提供的一个包,它包含了一些用于项目开发和构建的工具和配置。其中,`defineConfig` 是包中提供的一个函数。

通过引入 `defineConfig`,你可以定义你的项目的配置对象,并将其导出供 Vue CLI 使用。这个配置对象包含了一系列选项,用于配置项目的开发、构建和部署等方面。

启动应用

分别在 vue主应用 和 Vue微应用 应用的根目录下执行以下命令启动应用:

npm start

以上一个简单的微前端应用就启动成功了!