REACTJS -如何加载图像在一个单一的spa微前端构建与CRACO?

Question

我在REACT JS中有一个微前端应用程序，使用Single SPA管理。我们所有的MFE都是用webpack和CRA创建的。我们现在想把它们全部迁移到CRACO。一切正常，除了静态资产，它接受错误的URL。

通过

import OuterSpace from '@Img/pict-space.png
[...]
console.debug(OuterSpace);
<img src={OuterSpace} />;

我在控制台中正确地看到路径是static/media/pict-space.2f39435387dcdab3b797.png，但是图像的结果url不是从我的MFE根(这是http://localhost:3004)开始，而是接受窗口的所有url。

例如:如果当前路由是http://localhost:3000/backoffice/1234-5678-9012/list，我的图像的计算url是http://localhost:3000/backoffice/1234-5678-9012/list/static/media/pict-space.2f39435387dcdab3b797.png，那当然是404 not found。

如何管理?

Answer 1

在我看来，唯一合理的解决方案是在服务器中为根配置项目设置代理。这个代理将接收其他微服务的请求，并将它们路由到适当的HTTP服务器。这需要为每个MFE配置一个基本路径，以便URL可以区分。

如果您正在使用K8s，那么您很幸运:K8s已经配备了代理。只需使用为每个MFE设置的基本路径来定义MFE的入口，就完成了。