子应用在非根目录下时，资源路径404

背景

微应用接入时，需要写这段代码，这是官方提供的demo代码。

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

这里使用的是umi的qiankun插件，脚手架帮我们完成了这一步。

原因

window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__，是 qiankun 提供的。它拿到微应用html入口url之后，将pathname的最后一项去掉，再组装起来。如，子应用入口配置：http://xxx.com/sub/sub-child，那么经过处理后，会变成http://xxx.com/sub/。所以在加载分包的时候，丢失了前缀，然后导致404。

解决方案

在子应用的src下面新增public-path.js文件，然后在该子应用入口文件app.tsx的最上方引入。

// public-path.js

/** 处理qiankun的publicpath解析问题 */
/* eslint-disable @typescript-eslint/camelcase */
if (window.__POWERED_BY_QIANKUN__) {
    /* eslint-disable @typescript-eslint/camelcase */
    __webpack_public_path__ = new URL(window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__).origin + process.env.PUBLIC_PATH;
}

// app.tsx

import './public-path';

相关知识

尽管可以成功加载入口html，以及写在html文档的远程script和远程style。但会遇到以下问题：分包无法加载，排查之后，发现是publicPath丢失了

1. 主应用注册微应用入口，是入口html的地址。在这个微应用中入口如下：http://xxx:8000/sub/sub-xxx

2. webpack.output.publicPath，决定了输出静态资源请求url前缀，如代码写了/static/1.js，配置了output.publicPath = '/sub/sub-xxx/'，那么打包出来的结果是 /sub/sub-xxx/static/1.js

3. webpack_public_path是运行时的webpack.output.publicPath，可以动态修改其值，会覆盖webpack.output.publicPath的值

4. window.INJECTED_PUBLIC_PATH_BY_QIANKUN，是 qiankun 提供的。根据源码分析，它会拿到微应用html入口url之后，将pathname的最后一项去掉，再组装起来。譬如，子应用入口配置：http://xxx:8000/sub/sub-xxx，那么经过处理后，会变成http://xxx:8000/sub/。所以在加载分包的时候，丢失了前缀，然后导致404。