Angular MFE - WebPack5 - 模块联合 - 图像路径问题

Posted 2023-02-16

【中文标题】Angular MFE - WebPack5 - 模块联合 - 图像路径问题

【英文标题】：Angular MFE - WebPack5 - Module Federation - Image Path Issue

【发布时间】：2021-11-10 11:46:16

【问题描述】：

我们正在使用 Module Federation WebPack 5 创建一个 MFE Angular 应用程序，结果出现了图像源路径问题。当我们单独运行 MFE 时，图像正在加载（localhost:5000/assets/../angular.png），但是当我们运行主机/shell 应用程序时，由于 MFE 在不同的端口（5000）中运行而 Shell 在不同的端口（4200），当我们运行 shell 应用程序时，应用程序试图从 shell 的资产文件夹（localhost:4200/assets/../angular.png）访问图像。

我们有两个选择：

将这些图像移至 MFE 外部的公共文件夹并参考 使用配置文件中的基本路径动态设置图像路径

我们使用下面的示例进行测试，但在下面的示例中，angular.png 文件在 MFE1 和 Shell 中都可用，但如果我们从 Shell 中删除它，当我们加载 shell 应用程序时它将无法工作。

Source Reference Code Sample（感谢@manfredsteyer）

MFE 中的任何其他解决方案可以解决此问题吗？

【参考方案1】：

问题是图像是使用相对路径导入的。因为微前端总是加载在 shell 中，所以这些路径将引用 shell 的资产。要解决此问题，您需要将完整的 URL 添加到图像以从正确的微前端加载它。

如果你想在微前端加载一张图片，它应该是这样的：

<img src="http://localhost:5000/assets/image.png" />

要调整生产或开发的基本 url，您可以在服务中编写一个方法，将其注入到您的组件中。它可能看起来像这样：

public getImageBaseUrl(): string 
  if (environment.production) 
    return "http://someurl.com/assets/";
   else 
    return "http://localhost:5000/assets/";
  

然后你可以在你的 html 模板中调用该方法：

<img [src]="getImageBaseUrl() + 'image.png'" />

【讨论】：

你是对的，但是这个基本 URL 会根据环境（QA、UAT、PROD）而有所不同，对吧？如何解决？

刚刚更新了我的答案，希望对您有所帮助:)