‘壹’ 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 实战（一）
前两天用了一下微前端框架 icestark , 在实际架构搭建过程中发现中发现在 Vue 主应用子应用之间切换 tag （tag 分别主应用和子应用的页面）页签时会有子应用数据状态无法保存的情况，搜索了一波解决方案后发现， icestark 中 React 应用实现了对数据状态的缓存， Vue 里面没有这个实现。
React 实现的思路是通过 Tabs 组件结合 icestark 实现的一种机制，但是没有用到路由。由于架构时间有限，发现按照那个方案调整是实现方面时间代价有点大，尝试了一下 qiankun 发现框架中可以不存在这个问题，所以决定更换微前端框架方案为 qianun 。
如果想了解 icestark 可以看如下文章, 里面有一些关于微前端架构理念的思考
快速上手微前端框架 icestark （一）
快速上手微前端框架 icestark （二）
本地使用 vue-cli 创建了一个 Vue2.0 纯净项目作为主应用，执行 yarn add qiankun 命名安装 qiankun ，在 main.js 中引入 qiankun , 注册并启动
安装 vue-router 时遇到一个版本兼容问题，通过 npm install vue-router --save 命令安装会提示版本不兼容，如下效果
提示版本不兼容，如果通过控制台提示执行 npm install vue-router --save --force 或 npm install vue-router --save --legacy-peer-deps 可以安装 vue-router ，但是在 Vue 项目中使用时会有无法正确引入的异常
因为默认安装的 vue-router 是4.0大版本和现在的 vue 版本不兼容，要么升级 vue , 要么降级 vue-router ，公司前端团队技术栈定的 Vue2.0 版本，果断降级 vue-router , 安装时 vue-router 时指定一个3.0的版本就行了, 执行 npm install [email protected] --save 命令即可。
src 目录创建 public-path.js 文件，如果项目 lint 校验不通过需要添加 /* eslint-disable */
修改 main.js 文件, 引入 public-path , 添加 qiankun 配置
修改 vue.config.js 文件中的打包配置
这时子应用的配置就添加好了
Vue 子应用的 @vue/cli-xxx 依赖不能为 5.0 版本，当前配置下导致无法单独运行子应用。如果是安装的最新 vue-cli 脚手架创建的项目最好看一下 @vue/cli-xxx 相关版本。
‘叁’ 微前端 -- 干坤（一）
在 toB 的前端开发工作中，我们往往就会遇到如下困境：
基座模式
通过一个主应用，来管理其它应用。设计难度小，方便实践，但是通用度低。
自组织模式。应用之间是平等的，不存在相互管理的模式。设计难度大，不方便实施，但是通用度高。
就当前而言，基座模式实施起来比较方便，方案也是蛮多的。
注册表模式
和微服务架构相似，不论是哪种微前端方式，都需要有一个应用注册表的服务。这个应用注册表拥有每个应用及对应的入口，即路由。
它可以是一个固定值的配置文件，如 JSON 文件，又或者是一个可动态更新的配置，又或者是一种动态的服务。
作用：
应用注册。即提供新的微前端应用，向应用注册表注册功能。
应用发现。让主应用可以寻找到其它应用。
首先看一下它的用法：
https://qiankun.umijs.org/zh/guide/getting-started
微前端每个应用都拥有自己的生命周期：
bootstrap， 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
Mount，应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
Unload，删除应用的生命周期
Unmount，应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
干坤，作为一款微前端领域的知名框架，其建立在single-spa基础上。相较于single-spa，干坤做了两件重要的事情，其一是加载资源，第二是进行资源隔离。而资源隔离又分为Js资源隔离和css资源隔离.
每个微应用对全局的影响都会局限在微应用自己的作用域内。比如 A 应用在 window 上新增了个属性 test，这个属性只能在 A 应用自己的作用域通过 window.test 获取到，主应用或者其他应用都无法拿到这个变量。
1、快照沙箱
2、支持多应用的代理沙箱
💪 HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。
在使用 single-spa 加载微应用时，我们加载的不是微应用本身，而是微应用导出的 JS 文件，即JS Entry。
要接入一个微应用，就需要对微应用进行一系列的改造，然而 JS Entry 的问题就出在这儿，改造时对微应用的侵入行太强，而且和主应用的耦合性太强。
微应用改造一般分为三步：
l 微应用路由改造，添加一个特定的前缀
l 微应用入口改造，挂载点变更和生命周期函数导出
在js文件的入口中会导出一个对象，这个对象上有 bootstrap、mount、unmount 这三个接入 single-spa 框架必须提供的生命周期方法，其中 mount 方法规定了微应用应该怎么挂载到主应用提供的容器节点上。
l 打包工具配置更改
侵入型强其实说的就是第三点，更改打包工具的配置，使用 single-spa 接入微应用需要将微应用整个打包成一个 JS 文件，发布到静态资源服务器，然后在主应用中配置该 JS 文件的地址告诉 single-spa 去这个地址加载微应用。这就导致常见的打包优化基本上都没了，比如：按需加载、首屏资源加载优化、css 独立打包等优化措施。
项目发布以后出现了 bug ，修复之后需要更新上线，为了清除浏览器缓存带来的应用，一般文件名会带上 chunkcontent，微应用发布之后文件名都会发生变化，这时候还需要更新主应用中微应用配置，然后重新编译主应用然后发布，这套操作简直是不能忍受的。这也是 微前端框架 之 single-spa 从入门到精通 这篇文章中示例项目中微应用发布时的环境配置选择 development 的原因。
qiankun 框架为了解决 JS Entry 的问题，于是采用了 HTML Entry 的方式，让用户接入微应用就像使用 iframe 一样简单。
https://github.com/sy-l123/qiankun-demo
‘肆’ 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
‘伍’ 微前端——干坤qiankun Demo
微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆，拆完后在合！
我们可以将一个应用划分成若干个子应用，将子应用打包成一个个的 lib 。当路径切换 时加载不同的子应用。这样每个子应用都是独立的，技术栈也不用做限制了！从而解决了前端协同开发问题。
文档地址： https://qiankun.umijs.org/zh
2018 年 Single-SPA 诞生了， single-spa 是一个用于前端微服务化的 JavaScript 前端解决方案 ( 本身没有处理样式隔离， js 执行隔离 ) 实现了路由劫持和应用加载。
2019 年 qiankun 基于 Single-SPA, 提供了更加开箱即用的 API （ single-spa + sandbox + import-html-entry ） 做到了，技术栈无关、并且接入简单（像 i frame 一样简单）。
这里我们打算建立三个项目进行实操，一个Vue项目充当主应用，另一个Vue和React应用充当子应用
基座：qiankun-base 子应用：qiankun-vue、qiankun-react
react + react-router 技术栈的主应用：只需要让子应用的 activeRule 包含主应用的这个路由即可。
vue + vue-router 技术栈的主应用:
用绝对路径，不用用相对路径，例如
qiankun 只能解决子项目之间的样式相互污染，不能解决子项目的样式污染主项目的样式
冲突的样式，采用BEM命名方式
子应用，需要增加 update 钩子以便主应用手动更新微应用
主应用，直接调用子应用实例的 update 方法即可
‘陆’ 干坤-微前端架构使用
1.价值
2.官方文档
https://qiankun.umijs.org/zh/guide
3.配置
主应用(history模式)
子应用
如果是vue-cli >=3,需要在根目录创建vue.config.js文件
如果是vue-cli >=3,在根目录vue.config.js文件中的configureWebpack中添加
如果是vue-cli >=3,在根目录vue.config.js文件中的devServer中添加
‘柒’ 阿里 qiankun 微前端框架实践
qiankun ——— 一套完整的微前端解决方案： https://github.com/umijs/qiankun
如图所示，在qiankun框架中，有主程序与子程序。主程序会留出指定的DOM作为子程序的容器，并且通过主程序里的路由转发加载子应用。
修改主程序main.js注册子应用
修改主程App.vue注册子应用的容器
main.js
Demo： github.com/justworkhar…
与传统的父子组件通信一样，父程序通过props向子程序传递信息。子程序通过回调函数向父程序传递信息。
qiankun框架说白了就是通过在主程中添加一个展示子程序的DOM，经过路由判断做转发加载子程序。
‘捌’ 号称目前最火的前端框架Vue，它有什么显着特点呢
1、Vue是什么- Vue.js 是目前最火的一个前端框架，除了可以开发网站，还可以开发手机App。
- Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架。
- Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
- Vue.js 是一套用于构建用户界面的渐进式框架。
- 遵循 MVVM 模式
- 编码简洁，体积小，运行效率高，适合移动/PC 端开发
- 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目
总结一句话：不要在想着怎么操作DOM，而是想着如何操作数据!!
‘玖’ Vue与Qiankun微前端组合
参考： https://blog.csdn.net/qq_42268364/article/details/116127872
https://gitee.com/hua0123/qiankun-demo/tree/master
https://blog.csdn.net/weixin_48726650/article/details/106905193
1、修改 App.vue
我们要在app.vue中创建一个容器，负责把获取到的子应用加载到这里容器里面
2、新建 arc/qiankun.js文件，引用qiankun并且封装好
3、修改 main.js
4、修改 src/views/Home.vue
5、修改 src/views/About.vue
6、新建 vue.config.js
1、新增 src/public-path.js
2、修改main.js
在main.js，引入public-path.js 并配合主项目导出single-spa需要的三个生命周期。
注意：路由实例化需要在main.js里面完成，以便于路由的销毁，所以路由文件只需要导出路由配置即可（原模板导出的是路由实例）
3、vue.config.js
4、修改 src/router/index.js
5、修改 src/views/Home.vue
6、修改 src/views/About.vue
7、修改 public/index.html
分别启动 main-app 和 hello-app 项目，然后访问main-app的
‘拾’ 微服务干坤框架
微前端架构具备以下几个核心价值：
1.技术栈无关
主框架不限制接入应用的技术栈，微应用具备完全自主权
2.独立开发、独立部署
微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
3.增量升级
在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
4.独立运行时
每个微应用之间状态隔离，运行时状态不共享
$ yarn add qiankun # 或者 npm i qiankun -S
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'react app', // app name registered
entry: '//localhost:7100',
container: '#yourContainer',
activeRule: '/yourActiveRule',
},
{
name: 'vue app',
entry: { scripts: ['//localhost:7100/main.js'] },
container: '#yourContainer2',
activeRule: '/yourActiveRule2',
},
]);
start();