问题标签 [webpack-module-federation]

最新版本的 nuxt 是否支持“webpack 5”和“ moduleFederationPlugin ”？如果答案是否定的，我如何在 nuxt 中使用此功能？或者在 nuxtjs 中制作 microfront 的解决方案是什么？请帮助我，tnx

我正在使用 Vue 2，并且正在使用 vue cli 4 创建两个新项目。我正在选择从 cli 创建项目的默认选项。我在两个项目中都创建了一个vue.config.js文件，并插入了以下代码。主机项目：

远程项目：

我的 package.json 文件是这样的：

尝试使用 npm 构建项目时出现以下错误。

我正在使用 Angular ModuleFederation Application 创建一个微前端应用程序。

我在 1 个微应用中有一个反应形式

所以，当我运行这个应用程序http://localhost:4201/setup时，验证一切正常。

打包此应用程序后，

当我运行主机应用程序http://localhost:4200时，会加载微应用程序，但验证时会出现奇怪的行为。它重复如下，我不知道。

托管应用程序 webpack

请问有什么线索吗？

更新：

这只是不适用于路由 url 更改

当网址为

但不是当网址是

我正在尝试使用 Vue3 和 Module Federation 构建一个简单的微前端示例，但我遇到了冲突问题。

我在这里有代码： https ://github.com/ghalex/mf-example

只有两个 mf：

• 容器（Vue3）
• 身份验证（Vue3）

我遇到的问题是，当我导入 App.vue 组件时：

在auth模块中并将模块加载到容器中，App.vue 组件被覆盖。

我是否缺少任何 webpack 设置以确保每个组件都单独加载？

我们正在将我的项目迁移到模块联合。在这个过程中，容器项目必须不断地以地图为基础呈现。其他微项目应通过容器项目中的按钮打开。

我无法克服远程项目在容器中破坏地图的问题。

容器 webpack.config.js

容器索引.html

远程项目 webpack.config.js

远程 index.html

反应用法：

我试图配置一个简单的模块联合，如下所示。

webpack.config1

index.js

Gallery.js

webpack.config2

我收到这条消息：

entryPoint.js":1 Uncaught (in promise) ScriptExternalLoadError: Loading script failed. (missing: http://localhost:3000/entryPoint.js) while loading "./Gallery" from webpack/container/reference/Picture at Object. webpack/container/reference/Picture (entryPoint.js":1) at webpack_require (bootstrap:24) at handleFunction (remotes loading:33) at remotes loading:52 at Array.forEach () at Object. webpack_require .f.remotes (remotes loading:15) at ensure chunk:6 at Array.reduce () at Function. Function.fn.e 处的webpack_require .e（确保块：5）（热模块更换：81）

我正在创建微前端项目。我面临令牌注入问题。

我有一个库项目，由 mfe1 使用，然后加载到 shell 应用程序中。

库模块

从 mfe1，

在模块导入中

现在，当我加载mfe1配置时，配置已正确加载并且一切正常，但是当我mfe1通过shell应用程序加载时，它会返回错误。

外壳应用程序错误

环境

环境

我拿起了https://www.angulararchitects.io/en/aktuelles/multi-framework-and-version-micro-frontends-with-module-federation-the-good-the-bad-the-ugly的 git 示例/进一步引用为Ex。1 和https://www.angulararchitects.io/en/aktuelles/dynamic-module-federation-with-angular/进一步引用为 Ex。2.

前任。1 中有多个角度项目。为了简化起见，只需使用 shell 和 mfe1（微前端 1）。该示例对每个项目使用package.jsonand angular.json，我想使用它是因为在现实世界中，我们可能有很多微前端，并且不想一次更新所有依赖项或管理所有依赖项。在这个例子中，罪魁祸首是它使用了 aWrapperComponent和 a registry.ts。当一个路由被激活时，它会通过这个函数延迟加载：

registry包含一个映射，如

AFAIK 发生了一些“webpack 魔术”来进行导入，并mfe1通过webpack.config.js. 这意味着我需要在编译时知道微前端的数量和名称。

前任。2 使用动态方法，通过使用LookupService

以及构建路线的功能

现在，我想结合这两种方法。所以，我复制了 Ex 的方法。2 进入前。1，现在正在努力解决以下问题。

当简单地公开AppModuleofmfe1并动态加载它时，我有多个RouterModule.forRoot()调用，这是无法避免的，因为mfe1并且shell也应该独立工作。这会导致错误。所以，我只是做了一个“虚拟” AppModule，调用RouterModule.forRoot()并有一条指向另一个模块的路径，该模块仅使用RouterModule.forChild()（FlightsModule在示例中称为）。这个另一个FlightsModule是动态加载的shell，因此不再多次调用RouterModule.forRoot(). 这是必要的还是有其他选择？

因为我只能加载 的一个“子模块” mfe1，所以我需要转移几个常用文件的内容。mfe1/src/styles.css对于全局样式，需要将其移动到始终由路由激活的组件，encapsulation: ViewEncapsulation.None以使其全局可访问，例如在ngx-toastr需要使用时。微前端不能使用中的styles选项，因为它在加载到. 通常导入和声明的所有内容都需要转移到子模块。等等...angular.jsonshellAppModule

最后，我认为这种方法绝对不是最好的，但我尝试了很多不同的东西，除了这个，没有一个是有效的。

我们正在使用 Module Federation WebPack 5 创建一个 MFE 角度应用程序，并最终遇到了图像源路径的问题。当我们单独运行 MFE 时，图像正在加载localhost:5000/assets/../angular.png（ 4200) 并且localhost:4200/assets/../angular.png当我们运行 shell 应用程序时，应用程序正在尝试从 shell 的资产文件夹 () 访问图像。

我们手头有两个选择：

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

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

源参考代码示例（感谢@manfredsteyer）

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

将 SSR 与模块联合使用时出现问题。 我的代码示例

如何开始

• 纱线安装：全部
• 纱线外壳：服务器：构建
• 纱线外壳：服务器：开始
• 纱线远程：开始

我有两个不同的应用程序，其中一个是带有 SSR 和渲染组件逻辑的主机应用程序，第二个是带有组件的共享库。我在主机应用程序中配置了 ng-universal，并希望在加载页面时看到完整的代码响应，但我只从主机应用程序获得代码。 我的回复截图 该代码让我有机会从 remoteEntry.js 获取组件

我认为问题是因为我在服务器端没有对象 Window，但我为此使用了多米诺骨牌。也许有人可以帮助我，我将不胜感激。