qiankun部署后主应用无法加载子应用的问题

继之前的那些部署的坑之后，又有问题，就反正踩吧，记一下记一下。

背景

说下背景，主应用是用 next.js ，然后子应用是 react，主应用部署在二级目录，子应用部署在三级目录。路由使用的是 history。

问题

项目需要适配多环境部署，之前主应用在一级目录、子应用在二级目录的时候，部署是没啥问题的，主应用可以触发子应用资源的加载。但是多了一层级之后就不行了，主、子应用单独都运行正常，但是主应用没有触发任何网络请求，也没有成功加载资源，一直是空页面，也没有任何报错。

解决

网上看了下别人的问题，看到有个和我场景很相似的，最后确定是路由没有正确匹配引起的。由于需要适配多环境部署，所以前缀要抽取成变量。啊，这里挂在window是为了打包之后可以对文件进行变量注入和更改_(:з」∠)_，就可以不用改代码了，不挂window也可以，就申明一个全局变量即可。

子应用的 index.tsx

function render(props: any) {
  const { container } = props;
  ReactDOM.render(
    <Router
      basename={
        window.__POWERED_BY_QIANKUN__
          ? `${window.routerPath.prefix}/micro/react/`
          : '/'
      }
    >
      <App />
    </Router>,
    container ? container.querySelector('#root') : document.querySelector('#root')
  );
}

主应用也要注意修改 activeRule, assetPrefix的配置要与子应用的 prefix保持一致。

const list = microList.map((item) => {
  return {
    ...item,
    activeRule: `${config.assetPrefix}/micro${item.activeRule}`,
    props: {
      token: getToken(),
    },
  };
});

参考资料

主应用在部署后无法加载资源，没有触发资源请求，没有报错，本地正常