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

Posted 2023-02-23

【中文标题】相同的 Flutter Web 构建使用 `dhttp` 在本地运行，但使用 `firebase serve` 或 `firebase deploy` 失败

【英文标题】：The same Flutter web build runs locally with `dhttp` but fails with `firebase serve` or `firebase deploy`

【发布时间】：2020-04-08 02:25:29

【问题描述】：

我正在开发一款适用于移动设备和网络的 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 设置为公共目录。起初我对this question 的答案感到困惑，它应该只是build，但我认为Flutter for web 的预览版是这样，现在build/web 是index.html 所在的位置。

至于配置为单页应用程序（将所有网址重写为/index.html），我尝试了是/否，没有明显差异。再次从评论到上面链接的答案的一个小混乱：“您的另一个错误是将其配置为单页应用程序。它不会找到您可能拥有的任何资产。” p>

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

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

（使用 Flutter 最新版本 master v1.13.3-pre.12，Firebase 工具 v7.10.0）

【参考方案1】：

所以问题在于将脚本包含在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 引导我找到答案。

【参考方案2】：

尝试修改你的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”脚本会在页面解析完成后执行

【讨论】：

非常感谢伊曼纽尔！尽管您建议的解决方案（仅defering main.dart.js）本身不起作用，但它使我找到了defering 除/__/firebase/init.js 之外的所有脚本，并且有效。此外，它实际上完全没有defers 也能正常工作，而且顺序正确，因此初始化首先进行。