Qiankun 踩坑集合

Qiankun使用的时候的可能遇到的问题

Q1: Failed to fetch

R: 获取失败，待加载的服务不通，检查子应用的运行是否正常

Q2: Access to fetch at ‘http://192.168.5.51:8084/’ from origin ‘http://192.168.5.51:8080’ has been blocked by CORS policy：No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

R： 由于qiankun框架 解析微应用使用 import-html-entry库通过fetch请求相关资源，所以需要微应用支持跨域访问；在webpack devServer中加入以下代码即可

headers: {
      'Access-Control-Allow-Origin': '*'
    }

Q3: Loading chunk failed

R: 本地运行环境出现，检查子应用的 webpack_public_path 中 端口 ATT_APP_PORT 是否和实际运行一致

其余问题：

Q4: 融合页面不跳转

R: 子组件的跳转逻辑有问题，vue项目可集中检查路由跳转相关逻辑

Q5: 子组件样式异常

R1: 如果引入换肤sass样式：要给子组件的根元素id添加 data-theme属性，这样子组件的换肤样式才可生效

R2: 主子组件独立产品，需要添加样式隔离属性：

sandbox : {
experimentalStyleIsolation : true //沙箱隔离主子组件样式
}

  注：实验室样式隔离只能保证子组件的样式不影响主组件，但是子组件会受到主组件样式影响
  所以为了解决子组件样式问题，可以在主组件里添加子组件挂载id（仅影响子组件）新增css样式复写。

R3:
1. 原有追加到body的弹框，弹框实际脱离子组件挂载id元素控制范围，会存在样式无法生效。
    解决方法：举个例子，子组件使用样式库：element-ui ，不影响使用的情况下，可将原添加到body下的弹框追加到父元素：:append-to-body：false
别的组件库同理，调整弹框属性，使其追加到父元素，可以让子组件样式生效就可以。
    小tips：element-ui，嵌套弹框，都追加到父元素下，会存在关闭遮罩层问题， 嵌套弹框都追加到父元素下会产生弹框下遮罩层位置偏移问题，
    解决：
        用原生逻辑把位置改了下，在里层弹框关闭时，调用下面方法

upLoadingZindex() {
  const Node = document.getElementsByClassName(“v-modal”)[0];
  const parent = document.getElementsByClassName(“el-dialog__wrapper”);
  parent[parent.length - 1].parentNode.appendChild(Node);
}