前沿：前半年微前端火得一踏糊涂，刚好业务需要上有这样的利用场景，针对目前的微前端解决方案做了技术选型，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那些事