vite4子应用切换 样式丢失

[Ttou]

描述bug

• vue2 项目的 ElementUI 字体图标无法显示
• 子应用不保活时切路由后再回来，样式消失
• 切换应用时，路由报警告

如何复现

错误截图

最小复现仓库或者地址
复现仓库

[Ttou]

试了下样式丢失和vite的版本有关，vite2.7正常，vite4丢失

[Ttou]

路由警告改成vue2做主应用就不报了

[Ttou]

字体问题和vite版本有关，vite2.9正常

[codeflyA]

遇到了同样的问题 vite4下 vant的字体图标不显示，单独打开子应用的项目没问题，放到wujie框架下vant的字体图标不显示。

[Ttou]

基于 vite2.9 + vue-cli5 + wujie1.0.14 的演示项目:
仓库地址：https://gitee.com/jh_shot/wujie-template
演示地址：https://jh_shot.gitee.io/wujie-template

[yiludege]

vite 4 加载样式的代码：

这个 __vite__updateStyle 具体代码实现：

无界子应用如果是单例模式，js只会执行一遍，动态加载进来的样式，无界需要收集起来，等子应用下次切换回来，再将这些样式恢复，对于 document.body.appendChild，和 document.head.appendChild 这样的方法 无界内部已经劫持进行收集，但是vite4上面的代码可以看到采用了 style.InsertAdjacentElement 这样的方法导致无界没有收集到，所以采用下面的插件修改一下 style.InsertAdjacentElement 成 document.head.appendChild可以了，当然也可以不修改InsertAdjacentElement，将InsertAdjacentElement进来的样式放进 iframeWindow.__WUJIE.styleSheetElements里面，下次渲染就可以将样式还原了

      plugins: [
        {
          patchElementHook(element, iframeWindow) {
            if (element.nodeName === "STYLE") {
              element.insertAdjacentElement = function (_position, ele) {
                iframeWindow.document.head.appendChild(ele);
              };
            }
          },
        },
      ]

[Ttou]

试了下，确实可以，不过vite4+vue3+element-plus设置为保活，也需要加上这个配置，不然组件的样式会丢失

[wen403]

这个插件在哪使用

[wen403]

已解决，完美解决使用不了iconfont的问题，感谢大佬

[FBin001]

vite 4 加载样式的代码： 这个 __vite__updateStyle 具体代码实现：

无界子应用如果是单例模式，js只会执行一遍，动态加载进来的样式，无界需要收集起来，等子应用下次切换回来，再将这些样式恢复，对于 document.body.appendChild，和 document.head.appendChild 这样的方法 无界内部已经劫持进行收集，但是vite4上面的代码可以看到采用了 style.InsertAdjacentElement 这样的方法导致无界没有收集到，所以采用下面的插件修改一下 style.InsertAdjacentElement 成 document.head.appendChild可以了，当然也可以不修改InsertAdjacentElement，将InsertAdjacentElement进来的样式放进 iframeWindow.__WUJIE.styleSheetElements里面，下次渲染就可以将样式还原了

      plugins: [
        {
          patchElementHook(element, iframeWindow) {
            if (element.nodeName === "STYLE") {
              element.insertAdjacentElement = function (_position, ele) {
                iframeWindow.document.head.appendChild(ele);
              };
            }
          },
        },
      ]

patchElementHook 切换子应用2次后不再执行

[PanZhangOne]

vite 4 加载样式的代码： 这个 __vite__updateStyle 具体代码实现：
无界子应用如果是单例模式，js只会执行一遍，动态加载进来的样式，无界需要收集起来，等子应用下次切换回来，再将这些样式恢复，对于 document.body.appendChild，和 document.head.appendChild 这样的方法 无界内部已经劫持进行收集，但是vite4上面的代码可以看到采用了 style.InsertAdjacentElement 这样的方法导致无界没有收集到，所以采用下面的插件修改一下 style.InsertAdjacentElement 成 document.head.appendChild可以了，当然也可以不修改InsertAdjacentElement，将InsertAdjacentElement进来的样式放进 iframeWindow.__WUJIE.styleSheetElements里面，下次渲染就可以将样式还原了

      plugins: [
        {
          patchElementHook(element, iframeWindow) {
            if (element.nodeName === "STYLE") {
              element.insertAdjacentElement = function (_position, ele) {
                iframeWindow.document.head.appendChild(ele);
              };
            }
          },
        },
      ]

patchElementHook 切换子应用2次后不再执行

也遇到同样的问题，请问有没有解决啊

[wangliang01]

Vite4搭建的子应用，在切换路由2次后，页面就无法正常加载，有遇到类似的问题吗？另一个子应用是使用webpack + vue2搭建的子应用，就是正常的

[weizhigang55]

已解决，完美解决使用不了iconfont的问题，感谢大佬

好兄弟，想问下具体怎么使用的，有点不太明白稍微

[wen403]

yiludege

把@yiludege发的插件放进去就行了