【Bug】一个是antdv 样式被覆盖问题，另一个是主子加载异常情况（iframe模式正常）

fychinesepjj commented 5 months ago

问题描述

问题的具体描述

主子应用都是一个项目，区别是主应用启用了micro-app，主子应用单独运行一切正常，当主子应用集成使用时，子应用会出现系列问题：

主子报错情况（非iframe模式）
andv 样式被覆盖（iframe模式）
主子菜单切换导致子应用页面加载异常（项目中出现，demo中未复现，版本和代码其实类似）

上传截图

请上传代码截图、控制台、终端等截图以帮助我们了解您的问题。

1. 主子加载异常

默认点击子应用菜单就会异常异常：模式是iframe:false

正常：模式是iframe:true

2. antdv 样式被覆盖

iframe:true模式下 异常情况 反复点击子应用页面的“home”、“about”菜单，就会复现问题，按钮颜色被覆盖（其实在其他demo测试过，非iframe模式也有这个问题）初步分析是：表面现象是 andv 引入一个reset.css 导致样式被重写，根本原因是子应用样式插入时序问题

正常情况 第一次展示正常，子应用菜单反复切换后才会异常

3. 主应用页面加载异常

由于是项目代码没法对外提交，demo中暂未复现，所以先描述下现象。 非iframe模式，keep-alive、keep-router-state 都是 true

点击过程：使用浏览器返回前进功能一样可以复现首页（主应用） - -> 子应用（主应用） -> 关于（子应用）-> 关于（主应用） -> 子应用（主应用），截图如下：

复现仓库

请提供一个精简的代码仓库，然后上传到自己的 github，以帮助我们复现您的问题。 demo地址： https://github.com/fychinesepjj/microapp-feedback.git

环境信息

micro-app版本：1.0.0-rc.4
主应用前端框架&版本：

子应用前端框架&版本：

"ant-design-vue": "^4.1.2",
"vue": "^3.2.13",
"vue-router": "^4.0.3"

构建工具&版本： @vue/cli-service": "~5.0.0

bailicangdu commented 5 months ago

问题1是因为webpack.jsonpFunction冲突导致的，将子应用package.json name改一个值即可，比如micro-app-main-1。问题2是页面切换时动态创建的style内容被重置，导致优先级降低，这个问题我们还要再看一下。问题3无法复现，推测和问题1的原因相同。

fychinesepjj commented 5 months ago

问题1是因为webpack.jsonpFunction冲突导致的，将子应用package.json name改一个值即可，比如micro-app-main-1。问题2是页面切换时动态创建的style内容被重置，导致优先级降低，这个问题我们还要再看一下。问题3无法复现，推测和问题1的原因相同。

@bailicangdu 感谢回复，经过本地测试，问题1和问题3 确实是一个问题

Karl-Xu commented 5 months ago

样式插入时序问

我也遇到了同样的问题2问题，antd5使用了cssinjs的方式，当子应用使用antd5后，动态生成的style列表顺序就混乱了；在@ant-design/cssinjs的源码中，动态生成的style会被插入到head子节点的最前面；子应用单独启动效果如图：

而当子应用嵌入父应用启动后，cssinjs生成的style[prependQueue]的顺序会在head子节点的后面，效果如图：

bailicangdu commented 5 months ago

@Karl-Xu 不是同一个问题，你说的是这个吧 https://github.com/micro-zoe/micro-app/issues/1071, 升级到最新版本可以解决

Karl-Xu commented 5 months ago

@Karl-Xu 不是同一个问题，你说的是这个吧 #1071, 升级到最新版本可以解决

感谢，我升级试试

Karl-Xu commented 4 months ago

问题1是因为webpack.jsonpFunction冲突导致的，将子应用package.json name改一个值即可，比如micro-app-main-1。问题2是页面切换时动态创建的style内容被重置，导致优先级降低，这个问题我们还要再看一下。问题3无法复现，推测和问题1的原因相同。

问题2补充描述一下：和题主一样，子应用会引用reset.css初始化子应用样式，比如：这个时候input的权值是1，权级1级，antd 5动态生成的.antd-input权值10，权级2级。生效的是.antd-input；

但是嵌入micro-app后，

样式名称被修改，input 变成了 micro-app[name=biStudioV2] input，权重增加了，权值12，权级2级。而于此同时antd 5动态生成的.antd-input权值10，权级2级，生效的变成了input了。

查看网页源码：

micro-app仅在一个antd 5动态生成的style内添加micro-app[name=biStudioV2] 前置筛选器

jsgcs commented 2 months ago

问题1是因为webpack.jsonpFunction冲突导致的，将子应用package.json name改一个值即可，比如micro-app-main-1。问题2是页面切换时动态创建的style内容被重置，导致优先级降低，这个问题我们还要再看一下。问题3无法复现，推测和问题1的原因相同。

问题2补充描述一下：和题主一样，子应用会引用reset.css初始化子应用样式，比如：这个时候input的权值是1，权级1级，antd 5动态生成的.antd-input权值10，权级2级。生效的是.antd-input；

但是嵌入micro-app后，样式名称被修改，input 变成了 micro-app[name=biStudioV2] input，权重增加了，权值12，权级2级。而于此同时antd 5动态生成的.antd-input权值10，权级2级，生效的变成了input了。

查看网页源码： micro-app仅在一个antd 5动态生成的style内添加micro-app[name=biStudioV2] 前置筛选器

请问有什么好的解决方案么

micro-zoe / micro-app