相同的 Flutter Web 构建在本地使用“dhttp”运行，但在使用“firebase serve”或“firebase deploy”时失败

Question

我正在开发适用于移动设备和网络的 Flutter 应用程序。它使用了几个包，包括 Firestore 的包：

  cloud_firestore: ^0.12.9+1 #imported conditionally for mobile
  firebase_web: ^5.0.9 #imported conditionally for web
  #firebase_core: ^0.4.3+1 #not sure whether it's required in my case, assuming not (?)

我的 web/index.html 包括以下脚本：

  <script src="main.dart.js" type="application/javascript"></script>
  <script src="https://www.gstatic.com/firebasejs/7.6.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.6.0/firebase-firestore.js"></script>
  <script src="/__/firebase/init.js"></script>

1) 该应用程序在调试模式下按预期工作。

2) 然后我使用 flutter build web 进行构建，生成的文件结构类似于 the tutorial.

2.1) 当我运行在本地使用 dhttpd flutter pub global run dhttpd --path build/web

它按预期工作

3) 然后我尝试将它部署到 Firebase 托管。

当运行宁firebase init我设置build/web为一个public目录。起初我对的答案感到困惑，它应该只是 build 但我认为它对于 Flutter for web 的预览版是正确的，现在它是 build/web 其中 index.html 生活。

至于配置为单页应用程序（将所有网址重写为/index.html）我都尝试了yes/no，没有明显的区别。再次从评论到上面 link 的答案有点混乱："Your other mistake was to configure this as a single page app. It won't find any assets you might have."

3.1) 首先，按照 the tutorial firebase serve 或 firebase serve --only hosting 在本地尝试 - 它们都给了我一个空白页面，背景颜色与定义的主题正确，但没有其他存在。在页面检查器和源选项卡中，我看到与步骤 (2.1) 中加载的所有相同的 html 结构和脚本，唯一的区别是额外的目录 assetes 和 __/firebase 在 Firebase 的情况下.

3.2) 尝试 firebase deploy 会导致与 (3.1) 中相同的空白背景屏幕。在 firebase-debug.log 中没有要调查的错误。我还应该查看哪些其他日志？

(使用Flutter最新版本master v1.13.3-pre.12, Firebase tools v7.10.0)

Answer 1

尝试修改你的web/index.html

来自

<script src="main.dart.js" type="application/javascript"></script>

到

<script defer src="main.dart.js" type="application/javascript"></script>

这样 "main.dart.js" 脚本在页面解析完成后执行

Answer 2

所以问题出在 web/index.html 中包含脚本的顺序。将 /__/firebase/init.js 放在最前面解决了它：

  <script src="/__/firebase/init.js"></script>
  <script src="main.dart.js" type="application/javascript"></script>
  <script src="https://www.gstatic.com/firebasejs/7.6.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.6.0/firebase-firestore.js"></script>

感谢@emanuel-muroni 引导我找到答案。

相同的 Flutter Web 构建在本地使用“dhttp”运行，但在使用“firebase serve”或“firebase deploy”时失败

The same Flutter web build runs locally with `dhttp` but fails with `firebase serve` or `firebase deploy`

firebase

flutter

google-cloud-firestore

firebase-hosting

flutter-web