问题标签 [micro-frontend]

我有一个只有一页的 Vue 应用程序（没有路由）。在这个页面上有一个空div容器，我想div用多个外部 Vue 应用程序之一填充这个容器。这些外部应用程序也将仅包含一页（无路由）。问题是我的父项目使用了 Vuex，而嵌入的子项目必须访问这个 Vuex 商店。

那么我想要达到什么目的呢？管理员能够设置页面队列以按自定义顺序呈现。最后一页之后的下一页将再次渲染队列的第一页。

每个队列都是可自定义的，但它必须至少包含一个自定义页面。API 会告诉父项目“这次你必须渲染这个队列：第 7 页、第 3 页、第 24 页、第 5 页”，并且父项目会尝试将这些子项目（页面）嵌入到该 div 中。这些子项目/页面彼此完全独立，但它们都应该从父项目操纵全局状态。

我认为将每个子项目（页面）保留为外部项目/存储库会很好，因为这样父项目就不必知道这些自定义页面。我可以设计新页面，而他们所知道的只是对父 Vuex 商店的引用。

任何想法如何解决这个问题？如果您需要更多信息，请告诉我！

到目前为止我知道的事情：

使用iframe标签：

我可以通过 URL 嵌入其他 Vue 应用程序。但随后我将不得不将这些作为外部进程启动。此外，我必须创建从父项目 Vuex 商店到子项目的通信，反之亦然。

每个子项目都是一个组件：

我可以创建自己的（可能是 npm）组件并将它们注册到我的父项目中。但随后我将不得不设置我自己的组件注册表（我的公司不会使用付费的 npm 注册表）。在创建新的子项目时，我必须重建父项目，因为它必须了解每个子项目。该组件需要了解父级 Vuex 存储。我可以利用动态组件<component :is="currentComponent"></component>

将子项目挂载到父项目的 div 元素中：

不知道该怎么做。子项目需要了解父级 Vuex 存储。

使用微前端：

和上面一样。

我从一个基本项目开始，重现步骤：

父项目：

创建一个新项目“parent-frontend”并将 Vuex 添加到其中。生成的存储文件 (/store/index.js) 将是

接下来更新 App.vue 文件为

应该挂载到#page div 中的子项目：

创建一个新项目“child-frontend”。您可能需要 Vuex 来访问父项目商店，我还不确定。将 App.vue 文件更新为

所以我有一个有点像这样的应用程序架构。父应用是一个处理加载插件、服务通信以及拥有应用栏的外壳。它可以加载由不同服务器提供的“内容插件”（目前这些是在 iframe 中呈现的反应应用程序）。父子通信通过 postMessage 进行

我想在父应用程序栏中公开一个容器，子应用程序可以在其中呈现其导航模型。这很困难，因为孩子在自己的 iframe 中运行。

我试图实现的目标是什么？如果没有，我可以在不使用 iframe 的情况下重新架构它以支持我的用例

我在单个应用程序中创建了多个角度项目。我在根项目中使用了路由并尝试与子项目进行通信，但发生的情况是 url 被更改但页面未呈现。

根页面路由：

航班申请途径：

旅客申请途径

在根应用程序路由中，如果我从根目录中删除模块，则页面显示如下级联效果

但是，如果将这些项目作为模块导入，则页面不会呈现特定组件，而是显示默认主页，而是显示第一个应用程序，如下所示

我们正在使用 Vue.js + Vuetify.js 开发一种微前端方法来构建我们的网络客户端。整个分布式系统由许多微服务组成，这些微服务执行一些任务并产生一些数据。主要思想是每个服务还提供一个封装编译的Vue组件（片段），显示微服务的数据，并且可以在运行时由客户端按需获取和渲染。所以每个服务都有以下结构：

ui仅包含使用vue/cli. 该片段比普通的 Vue 组件更重要，如下所示：

这个组件被编译成一个包helloworld.umd.min.js，并从服务中作为静态文件提供：

在客户端，我们通过创建一个<script src="http://localhost:2000/helloworld.umd.min.js">带有指向服务片段的 URL 的标签来在运行时将片段绑定到特定页面上。当浏览器获取包时，HelloWorld组件可用并使用 Vue 动态组件呈现，如下所示：

这种方法并不完美，但通常有效。在大多数情况下，如此捆绑的组件被提取、渲染和显示为客户端的一部分，没有任何问题。然而，在上面的示例组件中，我们使用了DatePickerVuetify 示例中的 Vuetify。在客户端渲染此片段会导致浏览器选项卡完全崩溃，因此该选项卡仍然不负责。我已经发现这是由作用域插槽引起的，因此删除以下插槽定义将修复浏览器崩溃：

此外，其他复杂的 Vuetify 组件也无法通过使用所描述的方法正常工作。例如 VuetifyCarousel或Tabs组件（选项卡）是没有选项卡内容的渲染端，如下面的屏幕截图所示：

主要问题

编译嵌套的 Vuetify 组件会导致所描述的渲染问题是什么？将 Vue.js + Vuetify.js 组件编译成一个包以避免这个问题的正确方法是什么？

任何讨论都会有所帮助！

我决定重构我们的单体前端应用程序。我读了很多关于微前端和单回购方法的文章。决定合并这两种架构方法并同时使用。

我将拥有包含所有微前端子应用程序（单独的项目）的应用程序文件夹。它们将单独构建，构建后将捆绑为一个单元（用于 Web 组件）；

我听说很多不建议进行代码共享，但我决定拥有 libs 文件夹并将所需的所有内容放入子应用程序中。

因此，一旦我用 NX 完成了这个文件夹结构，我将构建自己的引导程序或协调器。所有构建都将作为 Web 组件加载，因为它们提供了很多好处。我被迫为编排器编写自己的路由，以便能够根据路由加载相应的 Web 组件。

但是，有一个很大的挑战。我需要子应用程序之间的通信。例如，如果在标题应用程序中单击用户名，我想将弹出窗口加载到另一个微应用程序中。所以我想要像 Ngrx、Reduxs 这样的通信......但是它们将当前状态存储到内存中，因此它们只能在特定范围内访问。

你有任何想法或经验如何强制像 ngrx 和 redux 这样的库在浏览器级别工作吗？我想调度可用于另一个子应用程序的事件。我找到了一种方法，redux 在本地存储上工作。还有其他想法吗？

我对微服务和 Web 开发还很陌生，但是在 ASP.NET 中为自己构建了一个小型微服务架构，其中我有一些服务，其中包含由 REST api 公开的简单 CRUD 操作。目前，我可以在单个 MVC 客户端中使用它们，并通过模型绑定使用来自微服务的数据来渲染视图。

我现在想要实现的是使每个服务的前端也独立，但我很难弄清楚如何。据我了解，每项服务都必须有自己的观点，并以某种方式将这些观点提供给客户。但是，在这种情况下，我如何处理 .cshtml 中的模型绑定，就像我目前在客户端中所做的那样？

我试图阅读该主题，但未能找到切入点。

在任何地方都有 ASP.NET（不是核心）中的微前端实现示例吗？

我正在使用 direflow-component 生成可重用的 React Web 组件。似乎生成的脚本“direflowBundle.js”正在从 Internet 请求许多资源。我试图在没有互联网的情况下离线使用它，但它根本不起作用。那么，有什么方法可以在不连接互联网的情况下离线使用 direflow-component 吗？

我的单水疗项目有问题，我不知道为什么，但有时我的单水疗会破坏布局，例如底部的页眉和其上方的内容，或页脚下方的内容。

对于不知道什么是单水疗的你，你可以在这里阅读：https ://single-spa.js.org/docs/examples

这是我的注册应用程序：

这是我的活动功能：

为了更好的可视化，这是布局中断的示例：

vue我正在使用带有&的单水疗中心react

有人可以帮我解决这个问题吗？我对这个布局中断感到很困惑

我目前正在尝试通过 Webpack 外部外部化 Angular 依赖项来缩短构建时间。到目前为止，我已经为 React 和其他小型库实现了这一点，没有出现任何问题。

Can't resolve all parameters for ApplicationModule: (?) at at syntaxError (util.ts:100) at CompileMetadataResolver._getDependenciesMetadata (metadata_resolver.ts:957) ...如果我只是移动“@angular/compiler”，它也可以工作，但是当外部化“@angular/core”和其他人时，我在引导应用程序时收到错误。

我使用的文件是您可以在 unpkg.com 中找到的 8.2.14 UMD 捆绑包，我的外部文件是：

rxjs 包是在这里找到的包https://cdn.jsdelivr.net/npm/@esm-bundle。

您可以在此 repo 上看到错误：https ://github.com/OriolInvernonLlaneza/test-share-angular

提前致谢！

编辑：感谢 yurzui 的回答，这个错误得到了解决。但是，我现在收到另一个错误：

第一个想法是饼干，但你可能很快就会用完空间。