微前端（qiankun）中，主应用无法加载子应用的静态资源

前言

在实习过程中，由于业务需要慢慢接触到了微微前端架构，主要是蚂蚁的微前端架构qiankun。
qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，是一个基于 single-spa 的微前端实现库。

什么是微前端

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
微前端的特点主要包括：

1. 与技术栈无关：主应用和子应用用什么技术栈都可以。比如，主应用使用react，第一个子应用使用vue，第二个子应用使用Angular
2. 独立开发，独立部署：子应用仓库独立，前后端独立开发，部署完成后主框架自动完成同步更新
3. 独立运行时：每个子应用之间状态隔离，运行时状态不共享

这里我只是简单介绍微前端以及qiankun，更多的细节，感兴趣的可以去官方看看官方文档，相当不错的。

qiankun的核心理念

1. 简单：由于主应用子应用都能做到技术栈无关
2. 解耦：确保子应用真正具备 独立开发、独立运行 的能力。

回到题目，主应用为什么无法加载子应用的静态资源

遇到的问题

在开发的时候，我在子应用中需要展示一张svg图片以及播放一段.flv视频文件。我在子应用中可以正常显示和播放，但是使用主应用加载子应用的时，却无法加载显示和播放svg图片以及.flv视频文件，png图是没有问题的。

官方文档的解释

• 官方文档数这个问题的本质原因在于 webpack 加载资源时未使用正确的 publicPath。
• qiankun 将外链样式改成了内联样式，但是字体文件和背景图片等静态资源的加载路径是相对路径。
• 而 css 文件一旦打包完成，就无法通过动态修改 publicPath 来修正其中的字体文件和背景图片的路径。

我当时的理解

因为 url-loader 的 options 项的属性 publicPath 属性默认是 ‘’，表示相对路径，即打包出来的资源引用 url 都会加上相对路径寻找 static 静态资源入口，比如：

/* static/css/app.e99e9aae.css */

background-header {
   
    background: url(../../static/img/bg_header.790a94f4.png);
}

官方文档的解释让我想明白了，所有子应用编译打包部署后，当主应用加载子应用，子应用加载自身的静态资源时，由于 其对应的静态资源文件里面的图片 url 和.flv视频问等引用是相对路径，会出现子应用的资源相对路径拼接主应用 domain 的情况，即子应用的 ../../static/img/bg