微前端如何部署应用_阿里 qiankun 微前端框架实践

‘壹’ qiankun微前端框架处理

https://blog.csdn.net/qq_41694291/article/details/113842872

概念：微前端的概念借鉴于后端的微服务，一般以业务功能为拆分单元
解决问题：大型项目的变更、扩展、维护困难的问题

总体积变大，插件可上传cdn，但公共函数资源不便于共享

iframe ：隔离性和兼容性好，性能和使用感差（性能差因为不会有缓存，每次重新加载）
基座模式 ：基于 路由分发 ，由基座监听路由变化，加载不同的应用，实现应用解耦，single-spa、qiankun
组合式集成 ：组件单独打包发布，类似于npm包
EMP ：主要基于Webpack5 Mole Federation
web components ：

我们采用的是qiankun，主要思路是将一个大应用，拆分为更小的、可独立开发、测试、部署的子应用。

传统的大型项目：所有模块都在一个应用里，由应用本身负责路由管理，属于 应用分发路由 方式
拆分微应用的项目：属于基座模式下的系统架构，各应用互相独立，单独运行在不同的服务上，基座（基座一般是用户最终访问的应用）根据路由去加载不同的应用到页面上，即 路由分发应用 方式

微前段主要需要解决的问题有两个

qiankun和single-spa对比

activePath与当前的hash对比一致

‘贰’ 阿里 qiankun 微前端框架实践

qiankun ——— 一套完整的微前端解决方案： https://github.com/umijs/qiankun

如图所示，在qiankun框架中，有主程序与子程序。主程序会留出指定的DOM作为子程序的容器，并且通过主程序里的路由转发加载子应用。

修改主程序main.js注册子应用

修改主程App.vue注册子应用的容器

main.js

Demo： github.com/justworkhar…

与传统的父子组件通信一样，父程序通过props向子程序传递信息。子程序通过回调函数向父程序传递信息。

qiankun框架说白了就是通过在主程中添加一个展示子程序的DOM，经过路由判断做转发加载子程序。

‘叁’ qiankun 微前端应用实践与部署（四）

一般情况下，我们对应用进行配置打包，要对图片字体等资源进行下面配置，使得资源路径正常加载。但是，在微前端模式下，子应用打包部署后，往往会出现子应用 css 文件里面引入资源路径加载失败的问题，下面就让我们来探究一下。

👉 独立应用下的 url-loader 配置：

因为 url-loader 的 options 项的属性 publicPath 属性默认是 '' ，表示相对路径，即打包出来的资源引用 url 都会加上相对路径寻找 static 静态资源入口，比如：

所有应用编译打包部署后，当主应用加载子应用，子应用加载自身的 css 文件样式时，由于其对应的 css 文件里面的图片 url 引用是相对路径，会出现子应用的资源相对路径拼接主应用 domain 的情况，即子应用的 ../../static/img/bg_header.790a94f4.png 会在主应用的 domain 下进行资源的寻找，导致加载失败 404 的情况。

如果项目有用到第三方库，比如 element-ui ，那么就更有必要进行处理了。因为 element-ui 的字体图标是在 css 里面引入的，还有相关背景图片的引入也是在 css 里，所以需要配置 webpack 的 url-loader ，生产模式情况下直接指定资源前缀，使之成为绝对路径。

这样配置后，打包出来的 css 样式文件会变成：

资源是绝对路径，就不会出现上面子应用资源加载失败的情况。

但是，这种前端配置文件写死路径的做法灵活性并不好，比如不能做到编译一次，任意部署，因为路径写死，所以如果需要部署到其他服务器的话，就需要重新编译了。

接下来，讲的是实现灵活部署的方案。

我们在只编译打包一次前端应用的前提下，为了实现灵活部署，需要借助 nginx 来实现。

下面以 vue-cli 3 的配置为例，与 vue-cli 2 只是写法上的区别，其他都一样。

假设主应用部署地址是 192.168.2.192 ，子应用的部署地址是 192.168.2.192:7102 。

打包编译部署后，子应用的 css 文件里面的图片资源引用 url 如下：

主应用加载子应用的时候，子应用的资源拼接主应用 domian 后，子应用的 css 文件里面的图片资源加载路径 url 就会变成：

此时的关键就是要访问到子应用的资源，而不是去主应用资源目录去找。

所以我们采用 nginx 路径代理转发端口的方案，当应用访问 192.168.2.192/live 这个路径时，经过 nginx 进行路径代理转发配置，转发到子应用端口。

配置 nginx 代理规则：

此时真正访问的资源路径（子应用资源路径）是：

👋 至此，通过修改配置 url-loader 的 publicPath 以及配置 nginx 的路径代理转发，就可以实现编译打包一次，到处部署的目的。

‘肆’ qianKun + VUE 实现微前端架构 (基于vue2实现)

创建两个项目作为实现demo，一个为主应用，一个为子应用

3.配置函数文件 microAppSetting

4.微应用出口文件 index.js

5.在App.vue内配置微应用容器及跳转菜单

6.在main.js文件内引入微应用出口文件 index.js

7.运行后展示

8.在配置完子应用后的主应用展示
点击子应用菜单

1.修改子应用路由文件内路由实例属性： base 为 "/child"

2.在main.js文件内导出生命周期钩子

3.配置Webpack、跨域与端口号
在vue.config.js内添加：

4.运行后展示

package.json

‘伍’ 前端微服务设计

近些年，前端发展呈百家争鸣式发展，框架层出不穷，版本更是迭代不穷，难免会出现前端项目技术栈不统一、所用框架版本不统一的情况。
如若某些项目，没有新的功能加入，又能线上稳定运行，但其技术栈却用的是 vue1.0，为了将其结合到新应用中去而对其重构，成本会很高。然而，微服务可以帮我们解决这个问题。
在既不重写原有系统的基础之下，又可以抽出人力来开发新的业务。其不仅仅对于业务人员来说是一个相当吸引力的特性，对于技术人员来说，不重写旧的业务，能在一些新技术上做挑战，也是一件很有意思的事情。
除此之外，在这两三年里，移动应用出现了一种趋势，用户不想装那么多应用。而往往一家大的商业公司，会提供一系列的应用。这些应用也从某种程度上，反应了这家公司的组织架构。然而，在用户的眼里他们就是一家公司，他们就只应该有一个产品。相似的，这种趋势也在桌面 Web 出现。聚合成为了一个技术趋势，体现在前端的聚合就是微服务化架构。

理想的前端微服务化，应该是符合如下几个特点：

路由分发式微前端，即通过设置路由，将不同的业务分发到不同的、独立前端应用上。其通常可以通过 HTTP 服务器的反向代理来实现，又或者是应用框架自带的路由来解决。

就当前而言，通过路由分发式的微前端架构应该是采用最多、最易采用的 “微前端” 方案。但是这种方式看上去更像是多个前端应用的聚合，即我们只是将这些不同的前端应用拼凑到一起，使他们看起来像是一个完整的整体。但是，它们并不是一个完整的整体，每次用户从 A 应用到 B 应用的时候，往往需要刷新一下页面。
通常可通过 nginx 配置反向代理，来进行路由分发，从而实现前端微服务。

它适用于以下场景：

iframe 可以创建一个全新的独立的宿主环境，这意味着我们的前端应用之间可以相互独立运行。

采用 iframe 有几个重要的前提：

即何时加载、卸载应用，如何监听应用事件等。

不论是基于 Web Components 的 Angular，或者是 VirtualDOM 的 React 等，现有的前端框架都离不开基本的 HTML 元素 DOM。

那么，我们只需要：

第一个问题，创建 DOM 是一个容易解决的问题。而第二个问题，则一点儿不容易，特别是移除 DOM 和相应应用的监听。当我们拥有一个不同的技术栈时，我们就需要有针对性设计出一套这样的逻辑。现有的框架有single-spa、qiankun、mooa等

常见的方式有：

其次，采用这种方式还有一个限制，那就是：规范！ 规范！ 规范！。在采用这种方案时，我们需要：

Web Components 组件可以拥有自己独立的 Scripts 和 Styles，以及对应的用于单独部署组件的域名。然而它并没有想象中的那么美好，要直接使用纯 Web Components 来构建前端应用的难度有：

现有的微前端框架有single-spa、qiankun、mooa。其均是在前端框架之上设计通讯、加载机制来实现的。

‘陆’ 微前端前言

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

主框架不限制接入应用的技术栈，微应用具备完全自主权

微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

每个微应用之间状态隔离，运行时状态不共享

微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。

1.url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
2.UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器 resize 时自动居中。
3.全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
4.慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

通过监听 url change 事件，在路由变化时匹配到渲染的子应用并进行渲染，这个思路也是目前实现微前端的主流方式。同时single-spa要求子应用修改渲染逻辑并暴露出三个方法：bootstrap、mount、unmount，分别对应初始化、渲染和卸载，这也导致子应用需要对入口文件进行修改。过于基础，成本太高，不建议。

qiankun是阿里推出的一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。因为是基于single-spa进行封装，所以single-spa的特点也被qiankun继承下来。成本低于single-spa，高于MicroApp。

MicroApp是京东推出的一款基于类WebComponent进行渲染的微前端框架，不同于目前流行的开源框架，它从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。它是目前市面上接入微前端成本最低的框架，并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。是目前市面上接入微前端成本最低的方案。

single-spa github地址： https://github.com/single-spa/single-spa
qiankun官网： https://qiankun.umijs.org/zh
MicroApp官网： https://cang.org/micro-app/

‘柒’ 基于Vue3+TS+ElementPlus+Qiankun构建微应用项目

Hello 大家好，这里是Anyin。

最近打算把一个小型项目（小程序点餐系统）重构为微服务+微应用模式，前端的技术栈打算使用Vue3 + TS + ElementPlus + Qiankun 。这里记录下我在构建基础微应用的过程。

重构后的项目相关地址：

•后端： Anyin Cloud [1]

•前端基座： Anyin Cloud Parent[2]

•前端微应用： Anyin Cloud Base[3]

好了，接下来，我们来看看如何基于 Vue3+TS+ElementPlus+Qiankun 构建我们的微应用项目。

另外说下，这正销猛里为什么不用 Vite 进行构建，原因是 Vite 目前结合 Qiankun 构建为应用还有点问题（采坑了），所以这里就放弃了。

首先，我们使用 vue-cli 创建一个parent项目:

接着，手动选择我们要添加的组件：

我们选择以下组件进行应用的构建，使用空格键进行多选，然后回车即可：

选择vue3.x版本

相关代码风格、路由模式都是使用默认，css编译我们使用less：

相关编码规范我们使用ESLint + Airbnb Config ：

最后，完整的选项如下：

当vue-cli帮我们创建好项目，我们进入项目查看下项目目录，如下：

首先，Qiankun的主应用是需要安装依赖的，微应用无需安装依赖，修改配置即可。这里我们先在主应用安装依赖

接着，进行相关微应用配置。我们新增一个 app.ts ，用于记录所有的微应用斗慧的入口：

然后，注册微应用，并导出start方法

导出 start 方法之后，需要在入口处执行该方法

对于整个界面，我们希望整体的布局是这个样子的：

所以，我们在安装 ElementPlus 之后，需要做这样子的布局。

首先，安装 ElementPlus

接着，在 main.ts 引入 ElementPlus 组件，如下:

然后，创建一个布局组件 Layout.vue ，如下：

最后，在App.vue注册该组件

运行起来呈现的效果如下：

微应用的初始化项目同主应用，这里就不详细说明。

微应用无需依赖 Qiankun ，这里我们做一些配置即可。

在 src 目录下新增一个 public-path.js 文件，内容如下：

在 main.ts 引入该文件

新增一个路由配置文件，这里我们创建对应的路由信息，并且兼容独立运行，内容如下：

接着，修改 main.ts 关于实例化的代码，如下：

这里主要是定义个渲染的方法，然后暴露举桥Vue实例，因为等下在微应用的生命周期的钩子会使用到。

对于微应用还需要暴露生命周期的钩子方法，这样子主应用才能够识别，在 main.ts 添加如下方法：

使用 vue 创建项目是没有 vue.config.js 文件的，这里我们手动创建一个，并且配置相关详细，代码如下：

•这里我们导入了 package.json 的 name 字段，因为这里需要和主应用配置的 app.ts 文件的 name 字段一致 • headers 添加跨域配置，因为主应用是通过 fetch 方法来获取微应用的资源的，而微应用是启动在另外一个端口，所以需要添加跨域配置 • output 配置了微应用的打包格式，主应用才能正确识别微应用的一些配置

还记得我们以下这个图不？

我认为 Header 应该是属于主应用，而下面的 Aside 和 Main 都是属于微应用， Aside 块一般都是用于展示菜单，个人认为各个微应用应该各自维护自己的菜单，而不是交由主应用维护。

所以，在微应用，我们还需要处理下左侧的菜单布局。

我们新增一个 Layout.vue 布局文件

至此，Vue3+TS+ElementPlus+Qiankun构建微应用项目的一个基本结构我们已经处理完成，整体运行看下效果：

首页

微应用

好了，基于 Vue3+TS+ElementPlus+Qiankun 的微应用项目基本框架我们已经搭建好了，后续就是慢慢填充一些工具和页面了。

微前端如何部署应用

与微前端如何部署应用相关的内容