问题标签 [single-spa]

我正在使用 single-spa、vue 和 vuetify 开发微前端，我有多个 vue 应用程序作为微前端，所以每个应用程序都有 v-app，这个 vuetify 菜单的 bcoz，在微前端外部单击时下拉菜单无法正常工作应用程序。

下面是类似的问题， https://github.com/vuetifyjs/vuetify/issues/4931

笔记 ：

vuetify 版本：2.4.0，vue 版本：2.6.11

我们正在考虑将 single-spa.js 用于微前端。一个被问到的问题是，一个单一的水疗应用程序是否也可以是一个渐进式网络应用程序 (PWA)。搜索并没有透露太多关于此事的信息。如果这很重要，单个应用程序将是 react-apps。提前致谢。

我正在使用 single-spa-vue 和 Vue 2.6.12 开发一个微前端，但它根本不工作。

我正在使用 webpack 模块联合插件。

这是我的切入点。

这是我的 webpack.config.js 文件

这是我的 index.ts 文件

当我运行yarn start并转到localhost:3002这是错误。

错误图像

有人可以帮助我吗？

谢谢！

我有一个基于 Angular 9 的 Angular 独立应用程序

我有另一个不同的应用程序——一个使用 React 和 MFE 架构构建的新应用程序。我们正在使用单水疗框架。这个应用程序有：

1. 多个微前端
2. 所有 MFE 都在根配置应用程序中进行配置，该应用程序是所有子 MFE 的父应用程序

如何从独立的 Angular 应用程序（通过按钮或链接）调用父根配置应用程序？

在我们为 Android 开发的电容器应用程序中，我们使用电容器.config.json 中的 server.url 从 url 加载整个应用程序。

我们的应用程序是一个单 spa 应用程序，它将 Angular 应用程序加载为多个微前端。我们使用以下命令构建我们的应用程序：

1. npm run build（这会为 single-spa 构建根配置）
2. npx 上限同步 android
3. npx cap 打开 android
4. 然后使用 Android Studio 构建 APK

然后我们尝试在我们的一个角度组件中执行以下代码。这样做是为了有条件地在组件中实现一些平台特定的逻辑。

在我们的例子中，在使用 chrome 调试器重新加载或再次关闭和打开应用程序后， Capacitor.isNative字段从true变为false 。我们是否需要做一些额外的事情来确保 Capacitor 将 App 识别为原生 App？任何人都知道为什么在我们重新加载页面后 Capacitor 对象会发生变化？

我们尝试使用其他 Capacitor API 来检测Capacitor.getPlatform()和Capacitor.platform等平台。在重新打开应用程序或使用 chrome 调试器重新加载页面后，这两个都从“android”变为“web”。

我们在尝试加载其他 Capacitor 插件时也看到了类似的行为，其中插件对象在重新加载页面或重新启动应用程序后更改其结构（即，可能是加载 Web 实现而不是 Android 特定实现）。有没有人遇到过类似的问题？

我正在使用单个 spa 开发一个微前端应用程序并做出反应。我创建了一个用于数据共享的实用程序模块并将其加载到根 url/中。但是每次我更改应用程序 URL 时，实用程序模块都会重新初始化。有什么方法可以防止实用程序模块被卸载，以便我可以跨应用程序保存数据？

我已经开始为具有单水疗中心的前端层构建原型。布局与https://github.com/react-microfrontends非常相似，这意味着：

• 根配置
• 导航栏 (React)
• 两个应用程序（两个 React）
• 样式指南模块
• 一个 API 模块，用于处理与一组 API 的通信

我设法让一个基本原型运行，但我现在需要实现一些基于 OAuth2/OpenID 的身份验证，我不知道从哪里开始。如果未通过身份验证或没有有效的 JWT，我需要将用户重定向到单独的 URL（Auth0 样式），然后每当身份验证令牌过期时，我需要一种令牌刷新机制。除了关于最佳实践、现有示例等的任何一般性建议之外，我还有一些我无法完全解决的具体问题。

1. 未经身份验证时，如何将用户重定向到不同的 URL？哪个模块/组件应该负责它？
2. 是否有开箱即用的实现 OAuth2 的库？特别是，我对某种自动令牌刷新感兴趣。
3. 确保未经身份验证/未经授权的用户无法访问应用程序包的最佳方法是什么？

提前致谢。

在将一个反应应用程序转换为实现了 il8n 的单个 spa 之后，我遇到了一个问题，即无法访问 translate.json 因此无法获取标签。

我是否应该修改 webpack.config.js 中的某些内容以使其正确

il8n 在 App.js 中导入 import "./i18n";

最初在转换为单水疗中心之前，该应用程序运行良好并调用 http://localhost:3000/locales/en/translation.json 但在将应用程序转换为单水疗中心后，获取请求将失败。 http://single-spa-playground.org/locales/en/translation.json

我确实按照本教程https://www.youtube.com/watch?v=W8oaySHuj3Y&list=PLLUD8RtHvsAOhtHnyGx57EYXoaNsxGrTU&index=13将反应应用程序转换为单个水疗中心。

WebPack 配置

尝试了解决方案但仍然没有解决 Reactjs - 加载翻译文件时出错

创建了一个反应应用程序，然后使用https://www.youtube.com/watch?v=W8oaySHuj3Y将其转换为单个水疗反应应用程序

当点击 http://localhost:8080/org-app.js 时，我会收到 javascript 文件的响应。此外，当http://single-spa-playground.org/playground/instant-test?name=@org/app&url=8080应用程序加载时。

但是，现在尝试在 html 页面中导入相同的应用程序并不会替换标记。但是，由于进行了 api 调用并加载了 redux 存储，因此它加载组件知道这一点。

即使我这样做了，也没有完成 singleSpa.registerApplication 是否需要创建一个根组件来注册应用程序。

org-app.js

TestPage.html 直接打开

我正在使用Single-SPA并React创建一个微前端架构。

目前，我有 3 个反应应用程序：

1. 导航栏应用程序：始终加载。这有 2 个菜单可以一次加载下面的一个 React 应用程序。

2. React App R1：这为路由'/ r1'加载

3. React App R2：这为路由'/r2'加载

根据single-spa文档，当我们注册一个 React 应用程序时，根据activeWhen我们传递给的字段registerApplication，single-spa 将决定它是否必须挂载该应用程序。

示例代码：

设想：

1. React 应用程序 R1 安装在路由 '/r1' 下
2. React 应用程序 R2 安装在路由 '/r2' 下
3. 我们在路线 r1 中，因此安装了应用程序 R1。在这里，我们在按钮单击时调度一个自定义事件。
4. 然后我们移动到路由 /r2，因此 App R1 被卸载，App R2 被安装。我在 App R2 中注册了一个事件监听器来监听来自 App R1 的事件。

问题： 来自 R1 的事件在单击按钮时被抛出，但由于没有安装 R2（直到我们移动到路由 /r2），所以没有监听器来监听来自 R1 的事件。

有没有办法做到这一点？

有人可以在这里帮忙吗。任何帮助深表感谢。