本文详细探讨了在使用微前端框架乾坤时遇到的五大问题，包括iconfont字体加载失败、DOM查询失效、组件库样式隔离、第三方JS加载不畅以及webpack-dev-server代理接口时cookie丢失。针对这些问题，作者给出了具体的解决方案，如修改字体文件位置、代理DOM查询方法、调整元素添加位置、处理第三方JS执行和调整跨域设置。这些解决方案旨在帮助开发者更好地理解和解决微前端环境中遇到的实际问题。
微前端乾坤使用过程中的坑
乾坤在启动子应用的时候默认开启沙箱模式{sandbox: true}，这样的情况下，乾坤节点下会生成一个 shadow dom，shadow dom 内的样式与外部样式是没有关联的，这样就会给子应用内的样式带来一系列问题。这其中很多问题并不是乾坤造成的，而是 shadow dom 本身的特性导致的，乾坤还是不错的（不背锅）。随时补充
1.iconffont 字体在子应用无法加载
原因：shadow dom 是不支持@font-face 的，所以当引入 iconfont 的时候，尽管可以引入样式，但由于字体文件是不存在的，所以相对应的图标也无法展示。
相关链接：@font-face doesn’t work with Shadow DOM?，Icon Fonts in Shadow DOM
方案：
- 把字体文件放在主应用加载
- 使用通用的字体文件
2.dom的查询方法找不到指定的元素
原因：
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
