Flutter Web App 未启动:脚本具有不受支持的 MIME 类型

2023-11-22

我的 flutter web 应用程序无法启动,我在浏览器控制台中看到以下错误:

enter image description here

仅当部署在 vercel 上时才会出现此行为。在 firebase 托管上部署时,我没有收到此错误。

此外,此错误仅发生在嵌套路由中。当我打开 URL 中没有子路径的已部署应用程序时,它会起作用。

该错误一定发生在loadEntrypoint功能

<script>
  window.addEventListener('load', function (ev) {
    console.log("LOAD!");
    // Download main.dart.js
    _flutter.loader.loadEntrypoint({
      serviceWorker: {
        serviceWorkerVersion: serviceWorkerVersion,
      }
    }).then(function (engineInitializer) {
    console.log("INIT");
      return engineInitializer.initializeEngine();
    }).then(function (appRunner) {
    console.log("RUN");
      return appRunner.runApp();
    });
  });
</script>

有趣的是这里说Failed to register a ServiceWorker for scope ('https://domainname.net/home/')即使我加载页面https://domainname.net/home/questionnaire。一般来说,我希望它会在以下位置注册 ServiceWorker:https://domainname.net但我对 ServiceWorkers 不太了解......

我对此特别困惑,因为这只发生在 vercel 上,但错误发生在web/index.js,它假设我的托管提供商不应该影响这种行为?

有任何想法吗?


  • 这是由这个错误引起的:https://github.com/flutter/flutter/issues/116360
  • 它已经在 master 中修复了:https://github.com/flutter/flutter/pull/118684
  • 不幸的是,该修复尚未进入稳定渠道(截至 2022 年 3 月 2 日),但有一个挑选请求.

临时解决方法: (ref)

将这两行添加到您的index.html:

<script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        entrypointUrl: "/main.dart.js", // <-- THIS LINE
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
          serviceWorkerUrl: "/flutter_service_worker.js?v=", // <-- THIS LINE
        },
        onEntrypointLoaded: function(engineInitializer) {
          engineInitializer.initializeEngine().then(function(appRunner) {
            appRunner.runApp();
          });
        }
      });
    });
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter Web App 未启动:脚本具有不受支持的 MIME 类型 的相关文章

  • 当用户尝试使用 flutter_inappwebview 在移动应用程序中上传文件时,如何请求用户权限?

    我正在尝试使用 flutter inappwebviewplugin 创建一个 flutter web 应用程序 在应用程序中 我添加了一个用于文件上传的 dropzone 插件 此功能在浏览器和 Android 应用程序上都运行良好 但在
  • Flutter firestore插件无法通过where和isEqualTo的组合来获取数据

    我在 Firestore 中有一个名为 trips 的集合 数据格式是这样的 我正在尝试使用下面的代码访问该集合的文档 第一种方式 try Firestore instance collection trips where createdB
  • 显示菜单位置 Flutter

    我有一个 GridView 小部件 其中包含一些用 GestureDetector 包裹的 GridTiles 当我长按它时 尝试显示一个菜单以删除 GridTile 一切都很好 除了我希望从我拥有的点开始显示该菜单点击的不是应用程序的顶部
  • 对于哪些 flutter 小部件我们需要使用 const?

    我了解的好处const并且小部件不会在状态更改时重建 但当您看到下面的代码时 仍然很明显它们是常量 我希望 flutter 自动处理它 或者 flutter 已经在处理它而我却没有意识到 This makes sense to me but
  • 颤振文本小部件仅显示最后一个条目

    我正在尝试在 flutter 中创建日历 目前我正在实施这些活动 为了测试这一点 我创建了一个方法来检查当前日期 即创建行的时间 是否有事件 如果是这种情况 则会在表示内容的容器中打印 x 整个事情只是第一次测试 看它是否在原则上有效 当我
  • 如何在 Flutter/Dart 中使用带有基类的 Provider

    我有这样的基类和派生类 abstract class A extends ChangeNotifier class B extends A 我正在使用这样的提供者 ChangeNotifierProvider b create contex
  • Flutter 命令删除 .pub-cache 文件夹中的包

    如何删除flutter包 pub cache文件夹 当我们给予flutter clean 它将删除当前目录中的build文件夹 我们可以手动删除 但是我的要求是删除里面的包 pub cache使用命令的文件夹 要清除全局 PUB CACHE
  • 没有为类型“Object”定义运算符“[]”。尝试定义运算符“[]”

    我的代码在下面给出了我在这一行中从 firebase 访问用户名时遇到的问题的错误 snapshot data username 它给出了上面提到的错误 我知道访问地图数据的唯一方法是这个 FutureBuilder future Fire
  • flutter 中 Future.delayed 与 Timer 有什么区别

    我想知道延迟代码执行的 Future delayed 和 Timer 方法之间的区别 两者似乎都做同样的事情 未来 延迟 Future delayed const Duration milliseconds 500 code VS Time
  • 遵循最佳实践在 flutter 中存储 API 密钥的正确方法

    这是在 flutter 中添加秘密 API 密钥的正确方法 最佳实践 以防我想将代码推送到 github 上 我制作了一个使用 API 的简单应用程序 但我以粗略的方式使用密钥只是为了测试该应用程序是否正常工作 通常根据我在后端开发应用程序
  • 尝试将 Flutter 应用上传到 ItunesConnect 时出现 UIWebView 错误

    我正在尝试将我的应用程序上传到应用程序商店 但是我不断收到错误消息 表明我的应用程序存在此问题 ITMS 90809 已弃用的 API 使用 不再接受使用 UIWebView 的新应用程序 相反 使用 WKWebView 可以提高安全性和可
  • 快捷栏持续时间和高度

    我正在尝试展示一个小吃店 当我点击手势检测器后 这个小吃有两个按钮 问题是小吃栏出现几秒钟然后消失 所以我有两个问题 如何阻止小吃栏消失 直到用户采取行动并单击按钮 此外 小吃栏具有整个屏幕的高度 如何使其在屏幕底部具有特定高度 您可以使用
  • MappedListIterable 不是子类型

    我是 flutter 和 dart 的新手 并尝试从 firestore 作为流获取数据并将其提供给我的 ListView 但我不断收到此错误 type MappedListIterable
  • Flutter 使用 RichText 填空

    我几乎完成了我的应用程序的填空实现 但不幸的是我不断遇到布局问题 然而 当我不断解决问题时 我几乎已经完成了 这是到目前为止的代码 RichText text TextSpan text dummy style TextStyle colo
  • 扑。是否可以更改 TextFormField errorText 填充?

    我在用着TextFormField with OutlineInputBorder 我需要里面的文本在右侧和左侧有填充 为此 我正在使用 contentPadding const EdgeInsets symmetric vertical
  • Android Studio 无法运行 Xcode 模拟器

    我正在尝试使用 Xcode iPhone 模拟器模拟我的 Flutter 应用程序 但收到此错误 在升级 Android Studio 和 Xcode 之前 它运行良好 Launching lib main dart on iPhone X
  • 使用 Flutter 3.10 / Dart 3.0 进行 VS Code 调试<优化>

    在最新的 颤振 升级 之后 我在 VS Code 调试期间查看某些变量时遇到问题 如何在悬停时查看变量的内容而不是获取此内容 Screenshot of hovering variable 这仅发生在某些变量上 其他变量我可以正常查看内容
  • 加载 HTML 文件并在 Flutter Web 中显示

    我有一个 HTML 文件 其中包含一些 JS 函数和 CSS 样式 是否可以将我的 html 文件加载到 Flutter Web 上的嵌入式小部件中 我已经使用 flutter webview pacakge 在 iOS 和 Android
  • 不使用 BuildContext 预加载图像

    有没有办法在函数中加载 Flutter 中的图像而无需访问 BuildContext Flutter 可以预加载图像precacheImage 需要BuildContext 使用起来不方便 我想加载图像initState StatefulW
  • dart中解析对象(不支持的操作:无法添加到固定长度列表)

    我有一个用户对象 当用户登录 注册时 该对象保存到云 Firestore 数据库中 因此 当用户登录时 将从数据库中检索用户对象 并且一切正常 直到我尝试对列表 usersProject 执行 添加 操作 Add the new proje

随机推荐