先讲下项目背景
- 子应用是vite工程,主应用是wujie。
- 使用vue-plugin-hiprint打印插件。
现象,独立运行一切正常,作为子应用时提醒 print-lock.css文件找不到。
我看到该插件源码内容,了解会下载样式内容 然后与模板动态生成html字符串,然后渲染。 出现的问题是下载失败。
起初,我以为是wujie子应用document被劫持,导致查找失败,调试对比dom是正常的,最后查看dom中目标link样式标签没有了,被转化了。
既然被转化,那么我在页面mouted其它时间点,使用js动态在插入一个link,预先再准备一份。结果还是提示找不到,难道是插入到主应用去了?反复查找,又一次被修改。
拉取vue-plugin-hiprint代码,修改请求地址,不再依赖于dom查找。
编译后,npm pack为tgz文件,项目本地安装。
以下是wujie处理link逻辑,大坑。
样式沙箱对 link 的处理逻辑(核心原因)
wujie 为了实现 子应用样式隔离,会对以下场景做特殊处理:
1. 静态 link 标签:子应用 index.html 里的 ,会被 wujie 拦截,提取 CSS 内容,然后动态转换成 标签插入子应用沙箱,同时删除原 (或标记为“已处理”)。 2. 动态插入的 link :若子应用通过 JS 动态创建 加载样式, wujie 也可能会劫持这个过程,同样将 CSS 转为内联 ,避免样式“逃逸”到主应用。
结果:子应用实际 DOM 中,你原本写的 可能已经被移除或替换成 ,所以用 $('link[xxx]') 自然找不到——因为标签类型都变了!