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);
}
文章链接
发表评论