微前端qiankun的使用坑qiankun在启动子应用时默认开启沙箱模式{sandbox:true}。这种情况下会在乾坤节点下生成一个shadowdom，shadowdom中的样式与外部样式无关，这会给子应用中的样式带来一系列问题。其中很多问题并不是乾坤造成的，而是shadowdom本身的特性造成的。乾坤还是不错的（不怪）。随时补充1.子应用无法加载iconffont字体的原因：shadowdom不支持@font-face，所以在引入iconfont的时候，虽然可以导入样式，但是因为字体文件不支持不存在，相应的图标也无法显示。相关链接：@font-facedoesn'tworkwithShadowDOM?,IconFontsinShadowDOM解决方案：将字体文件放在主应用中加载使用常用字体文件，这样就不需要单独加载字体文件了（没什么意思~）2.dom查询方法找不到指定元素原因：shadowdom中的元素是孤立的元素，所以document下的查询方法，如querySelector、getElementsById等，无法获取到其中的元素影子王国。解决方法：代理document下的各个查询元素的方法，在子应用外使用shadowdom层查询。子应用dom对象的获取方式可以参考乾坤的initGlobalState方法。3、组件库动态创建的元素不能使用自己的样式原因：一些对话框或者提示窗口是通过document.body.appendChild添加的，所以shadowdom中引入的CSS不能应用到外部元素上。解决方法：代理document.body.appendChild方法，即把新添加的元素添加到shadowdom容器中，而不是最外层的body节点。补充：类似问题可以靠这个方向看是shadowdom节点还是dom方法的问题。4.第三方引入的JS不起作用的原因：有些JS文件本身是立即执行功能，或者动态创建scipt标签，但是所有获取资源的请求都被乾坤劫持了，所以不会正常执行，也不会在window下挂载对应的变量，调用value的时候自然这个变量就不存在了。解决方法：参考乾坤issue，子应用在body中添加script标签失败5.webpack-dev-server代理访问的接口cookie丢失原因：子应用的端口在以下端口请求主应用，还有一个跨域，axios默认是不带Cookie的跨域的。如果axios的withCredential设置为true（表示跨域携带cookie），那么子应用需要设置跨域访问headerAccess-Control-Allow-Origin（devServer下配置header）为指定的域名，但不能设置为*.此时主应用和子应用端口同时有请求，跨域访问头中只能设置一个地址，导致无法代理指定服务器接口。解决方法：子应用接口请求的端口使用主应用接口请求的端口，使用主应用的配置代理请求//主应用devServer:{...port:9600proxy:{//proxy配置}}//子应用devServer:{...port:9600,//使用主应用的页面访问端口}
