微前端乾坤使用过程中的坑

微前端 同时被 3 个专栏收录
1 篇文章 0 订阅
5 篇文章 0 订阅
1 篇文章 0 订阅

微前端乾坤使用过程中的坑

乾坤在启动子应用的时候默认开启沙箱模式{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

方案:

  1. 把字体文件放在主应用加载
  2. 使用通用的字体文件

2.dom的查询方法找不到指定的元素

原因:shadow dom 内的元素是被隔离的元素,故 document下查询的方法例如,querySelector、getElementsById 等是获取不到 shadow dom 内元素的。

方案:代理 document 下各个查询元素的方法,使用子应用传入的容器,即外面的 shadow dom一层查询。具体使用可以参考乾坤的这个方法 initGlobalState

3.组件库动态创建的元素无法使用自己的样式

原因:有些对话框或提示窗是通过document.body.appendChild添加的,所以 shadow dom 内引入的 CSS 是无法作用到外面元素的。

方案:代理document.body.appendChild方法,即把新加的元素添加到 shadow dom容器下,而不是最外面的 body节点下。

补充: 类似的问题都可以往这个方向靠,看是不是shadow dom节点或者dom方法的问题。

4.第三方引入的 JS 不生效

原因:有些 JS 文件本身是个立即执行函数,或者会动态的创建 scipt 标签,但是所有获取资源的请求是被乾坤劫持处理,所以都不会正常执行,也不会在 window 下面挂载相应的变量,自然在取值调用的时候也不存在这个变量。

方案:参考乾坤的 issue,子应用向body添加script标签失败

5.webpack-dev-server 代理访问的接口 cookie 丢失

原因:在主应用的端口下请求子应用的端口,存在跨域,axios 默认情况下跨域是不携带 cookie 的,假如把 axios 的 withCredential设置为 true(表示跨域携带 cookie),那么子应用需要设置跨域访问头Access-Control-Allow-Origin(在 devServer 下配置 header)为指定的域名,但不能设置为*,这时候同时存在主应用和子应用端口发出的请求,而跨域访问头只能设置一个地址,就导致无法代理指定服务器接口。

方案:子应用接口请求的端口使用主应用接口请求的端口,使用主应用的配置代理请求

// 主应用

devServer: {
    ...
	port: 9600
    proxy: {
		// 代理配置
    }
}

// 子应用
devServer: {
    ...
	port: 9600, // 使用主应用的页面访问端口
}
  • 1
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

我来自伯纳乌

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值