乐趣区

关于微前端:基于qiankun落地部署微前端踩坑记

jiezi

前沿：前半年微前端火得一踏糊涂，刚好业务需要上有这样的利用场景，针对目前的微前端解决方案做了技术选型，qiankun 作为蚂蚁金服外部孵化进去的微前端解决方案，通过线上利用充沛测验及打磨最初开源，最终抉择 qiankun 作为咱们云产品架构入口。不过官网文档上对于上线部署文档较少，很多童鞋也可能只是在本地玩玩，没有到真正走通整个闭环，于是联合本身，在将 qiankun 落地过程中遇到的“那些坑”做个梳理。心愿对你有所帮忙

1.???? 茶前点心

本文不大篇幅介绍对于 qiankun 的“前世今生”，更多的设计理念介绍请看文档 如果有想理解其余微前端解决方案的童鞋，也能够回顾下之前树酱分享的微前端那些事

举个例子：咱们有个这样的场景，我有个门户 Portal 的登陆界面(主利用基座)，登陆成绩后能够切换不同的子利用，如下有两个子利用 A 和 B，且都在之前是独立部署的，独自能够拜访，然而咱们当初想借助 qiankun 把他们“嵌”到基座来加载，往下看实操

你可能会问间接用 iframe 不香吗？真不香，次要几个局限问题

  • 父子利用之间通信问题
  • cookie 共享问题（可做单点登陆 SSO）
  • 交互视图成果不佳

下面是一个通过域名拜访子利用的示意图，接下来咱们看看一个 view 视图，header 头部和 sideMenu 左侧菜单是属于 portal 门户的，而右侧区域则是显示切换子利用的视图，预期成果：当咱们拜访 dev.portal.com/a 该域名时（即切换到子利用 A），左侧菜单也会依据不同利用切换不同数据

1.1 注册子利用时应该留神哪些问题？

???? 啊明同学：qiankun 是如何注册子利用的呢？

qiankun 是通过registerMicroApps(apps, lifeCycles)API 来注册子利用的，具体文档请看点我???? 用来实现当浏览器 url 发生变化时，主动加载相应的子利用的性能，联合下面的例子咱们试着在基座 main.js 注册子利用

次要包含：

  • entry: 子利用的 entry 地址，比方咱们当初有两个子利用 A 和 B，那么这里配置的就是他们的资源拜访域名或 ip
  • render：实质上是 container 的转换，container 用来定义子利用的容器节点的选择器或者 Element 实例，这里应用的是理论例子
  • activeRule：子利用的激活规定，即什么路由拜访才会去 fetch entry 配置的域名或 ip，咱们用了 getActiveRule 来实现匹配，咱们看看 getActiveRule 的实现, 该函数通过传入以后 location 作为参数，而后依据函数返回数值来看，若返回值为 true 时则表明以后子利用会被激活，则去调用 entry 入口配置

匹配如下

✅ https://dev.portal.com/a

​

✅ https://dev.portal.com/a/anyt…

​

???? https://dev.portal.com/c

匹配胜利后，qiankun 通过 fetch 去获取所匹配子利用的动态资源

1.2 资源拜访跨域如何解决？

???? 啊呆同学：你这样不会跨域吗？基座 https://dev.portal.com/ 获子利用 a 的资源 https://dev.monitor.com/ a 的资源，依据浏览器同源策略 (浏览器采纳同源策略, 禁止页面加载或执行与本身起源不同的域的任何脚本) 应该获取不到吧，显著跨域

答案：是，因为 qiankun 是通过 fetch 去获取子利用注册时配置的动态资源 url，所有动态资源必须是反对跨域的，那就得设置容许源了，简略的设置能够看上面

  • Access-Control-Allow-Origin：跨域在服务端是不容许的。只能通过给 Nginx 配置 Access-Control-Allow-Origin * 后，能力使服务器能承受所有的申请源（Origin）
  • Access-Control-Allow-Headers: 设置反对的 Content-Type

1.3 子利用加载失败是什么问题？

???? 啊明同学：跨域解决了，可还是 fetch 不到子利用 a 的动态资源？是什么问题咋搞？

呈现这个报错：Application died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in xxx entry

答案：你的打包姿态不对

vue-cli 3x 我的项目中须要通过在 vue.config.js 配置 output 来配置输入的形式，如下???? 所示

  • pubilcPath: 次要解决的是子利用动静载入的 脚本、款式、图片 等地址不正确的问题
  • output.library：须要与主利用注册子利用时的 name 统一且惟一
  • output.libraryTarget:umd : 导出 umd 格局，能够反对 inport、require 和 script 引入

而后创立一个 publichPath 文件，并在 main.js 引入

1.4 子利用的 publichPath 到底应该怎么配置？

???? 啊明同学：打包 output 配置改好了，然而为什么 publichPath 门路配置为 /a?

拓展: 沿用上文提到的 a 利用的拜访域名 dev.monitor.com/a

当初浏览器要正确获取 a 利用的动态资源中的 css 文件, 则会去拜访 dev.monitor.com/a/css/common.css

次要分两种状况：

  • publichPath 如果默认配置或者配置为 /，则生成的 index.html 拜访的资源是 <link href=”/common.css” rel=”prefetch”> 则不正确，因为将拜访的是 dev.monitor.com/css/common.css 并不是 a 利用的资源
  • 配置为 /a，则生成的 index.html 拜访的资源是 <link href=”/a/common.css” rel=”prefetch”> 就能够

???? 啊呆同学：那 publichPath 门路配置为 ./ 相对路径能够吗?

答案：也是能够的，跟配置为 /a 拜访一样

1.5 如何保障原来的利用运行失常，但能集成到基座 portal 中

???? 啊明同学：我之前 a 利用是独自运行部署的，我通过 qiankun 集成到基座 portal 中会有影响吗？

答案：应用这个全局变量来辨别以后是否运行在 qiankun 的主利用中

那就是：window.__POWERED_BY_QIANKUN_那能够用来干嘛？请看上面????

  • 独立运行：window.__POWERED_BY_QIANKUN__为 false，执行 mount 创立 vue 对象
  • 运行在 qiankun: window.__POWERED_BY_QIANKUN__为 true，则不执行 mount

1.6 父利用如何共享 util 和 data 给子利用

???? 隔壁老王同学：如果我想把门户登陆利用登陆胜利获取到的集体数据共享给子利用还有一些专用的办法，我该怎么做？

答案：能够在注册子利用的时候，把定义好要共享的 msg，通过 props 共享进来

  • msg.data 把 store 状态治理数据共享给子利用
  • msg.prototype 定义一些原型数据，比方是否为 qiankun 上下文中

父利用定义完，那子利用是如何获取呢？是通过在子利用挂载前，将 props 数据导到子利用通过遍历赋值给到子利用 vue 原型中

1.7 history 路由模式，须要如何配置 ngnix，能力失常拜访？

???? 啊宇同学：我看你拜访的路由模式不是 hash，而是 history 模式，那你是怎么解决当页面刷新 404 问题？

答案：通过 nginx 配置退出 try_files，history 模式同样会有一个问题，就是当页面刷新时，如果没有适合的配置，会呈现 404 谬误，针对这种请看，须要额定在 nginx 配置，对于找不到 url 的，将首页 html 返回

  • try_files：用来解决 nginx 找不到 client 客户端所须要的资源时拜访 404 的问题
  • proxy_pass：次要是用来配置接口网关反向代理，能够使得父子利用下拜访的 api 是统一的，避免接口跨域问题

理解更多 ngnix 配置学习，请看树酱之前写的 nginx 那些事

退出移动版