只有 Flutter web release 构建不起作用

Question

当我在 Android Studio 中使用运行按钮或flutter run -d Chrome 运行 Flutter Web 应用程序时，一切正常。

当我运行flutter build web 并打开$(project_dir)/build/web/index.html 时，我得到一个白屏。浏览器控制台有这些错误：

Failed to load app from a service worker. Falling back to plain <script> tag. index.html:85:21

Loading failed for the <script> with source “file:///main.dart.js”. index.html:1:1

当我运行flutter build web -v 时，会出现以下内容：

[  +68 ms] Skipping target: web_entrypoint
[   +1 ms] Skipping target: gen_localizations
[ +311 ms] Skipping target: dart2js
[  +10 ms] invalidated build due to missing files:
/home/vanousek/prg/substance-mix/DOES_NOT_EXIST_RERUN_FOR_WILDCARD954977783
[  +72 ms] web_release_bundle: Starting due to {InvalidatedReasonKind.inputMissing: The following inputs were
missing: /home/vanousek/prg/substance-mix/DOES_NOT_EXIST_RERUN_FOR_WILDCARD954977783,
InvalidatedReasonKind.inputChanged: The following inputs have updated contents:
/home/vanousek/prg/substance-mix/build/web/main.dart.js,build/web/index.html}
[ +121 ms] Manifest contained wildcard assets. Inserting missing file into build graph to force rerun. for
more information see #56466.

Answer 1

在为 web 构建你的 Flutter 应用时，它打算在 web 服务器上运行。 运行flutter build web，会将项目编译为Web 项目。您可以使用网络托管服务提供商，例如 netify、firebase 托管和 Github 页面。

运行./build/web/index.html 不会出现。这就是您在控制台中出现错误的原因。

您可以运行 flutter run --release -d chrome 在 Chrome 上以发布模式运行。

编辑： 这是 chrome DevTools，该站点似乎正在寻找 main.dart.js 和其他资源。

我注意到它指向https://your_url/main.dart.js，但资源位于https://your_url/substance_mix/main.dart.js。所以它抛出了 404。

对此的一种解决方案是编辑index.html 并将/substance-mix/ 添加到所有资源中。例如。将scriptTag.src = 'main.dart.js'; 更改为scriptTag.src = 'substance_mix/main.dart.js';

或者您可以使用 GitHub Pages 配置。并将您的网站直接放在https://mikulasvanousek.github.io/