如何在特定路线的反应应用程序中集成 flutter web 构建？答案

【问题标题】：How to integrate flutter web build inside react app for specific route?如何在特定路线的反应应用程序中集成 flutter web 构建？
【发布时间】：2022-11-26 19:34:34
【问题描述】：

我有一个要求，我想在反应应用程序中为特定的 URL 运行 flutter 应用程序，对于其余的 url，反应应用程序将运行。

我将拥有 flutter build 文件夹，并且还将使用浏览器的通信通道来传递数据，但是有什么方法可以将 flutter app 集成到此页面的 react app 中？

【问题讨论】：

你如何服务你的反应应用程序？你使用 Nginx、Apache 吗？您可以编辑您的配置文件以在该特定 URL 上提供 flutter 应用程序。如果您希望我回答更详细的解释，请告诉我。
实际上，我想将 flutter build 集成到 React 应用程序中，因为我想实时传输数据。我需要通过 flutter 应用程序中的 react 应用程序存储数据，所以我不能用 nginx 或 apache 来做。我能想到的唯一解决方案是微前端，但找不到与此相关的任何博客或解决方案。但是我们在 pm2 中使用 nginx
blog.logrocket.com/flutter-web-app-node-js 请浏览此网址。（礼貌：blog.logrocket.com 和 stackoverflow）
尝试托管 flutter web 应用程序，然后在 react 应用程序中将其加载到 iframe 中。只是想法

标签： javascript reactjs flutter single-page-application micro-frontend

【解决方案1】：

我找到了一种解决方案，可以帮助将 flutter app build 集成到 react app 中。只需将你的 flutter 应用程序构建放在 /public 文件夹中。在路由组件的加载事件中，使用以下代码加载该应用程序。

function loadMainDartJs() {
    var scriptTag = document.createElement('script');
    scriptTag.src = './main.dart.js';
    scriptTag.type = 'application/javascript';
    document.getElementById('flutterPreview').append(scriptTag);
}
loadMainDartJs();

【讨论】：

【解决方案2】：

还有 Next.js

您所需要的只是将您的脚本导入到您需要的页面的 Head 标记中，例如：

/pages/index.jsx

export default function Home() {
  return (
    <div>
      <Head>
        <script src='/main.dart.js' defer></script>
      </Head>
    </div>
  )
}

并且您的飞镖脚本移动到公共文件夹： /public/main.dart.js

【讨论】：

【解决方案3】：

blog.logrocket.com/flutter-web-app-node-js 请浏览此 URL。（礼貌：blog.logrocket.com 和 stackoverflow）

【讨论】：

您的解决方案与我所问的完全不同。该博客无法在 React 应用程序中呈现 Flutter 应用程序构建。