Flutter App 通过 Github 页面黑屏到 Web

Question

我有一个由 Flutter-Web 商店生成的页面，它是一个空白页面。我在控制台中有一个错误。这是在将 Flutter 的构建 Web 上传到 GitHub Pages 后发生的。

Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://adamtechnologynl.github.io/') with script ('https://adamtechnologynl.github.io
/flutter_service_worker.js?v=2470069411'): A bad HTTP response code (404) was received when fetching the script.
manifest.json:1 Failed to load resource: the server responded with a status of 404 ()
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
manifest.json:1 Failed to load resource: the server responded with a status of 404 ()
(index):88 Failed to load app from service worker. Falling back to plain <script> tag.
(anonymous) @ (index):88
(index):47 GET https://adamtechnologynl.github.io/main.dart.js net::ERR_ABORTED 404
loadMainDartJs @ (index):47
(anonymous) @ (index):91

Answer 1

我找到了解决方案。当您将其放在另一个目录而不是 GitHub 的根目录时，就会发生这种情况。

所以我的代码位于“https://username.github.io/demo/book-king/behaving-web-v1/”中，所以最后一部分我们应该在“https://username.github.io/”之后附加所有内容“也在index.html中。你可以通过修改这一行来解决它（我的第17行）：

改变：

<base href="/">

进入：

<base href="/demo/book-king/belasting-web-v1/">

然后你就完成了。

Answer 2

这个解决方案有效。但对我来说，第 17 行不是

<base href="/">

。

就像这样

<base href="$FLUTTER_BASE_HREF">

。鉴于 FLUTTER_BASE_HREF 是一个变量，它可以被修改。

如何？: 向

--base-href

提供

flutter build

参数，如下所示

托管网址：https://.github.io/project_aj/demo/gh-pages/

除了

https://<github_user_name>.github.io

之外，还应作为

--base-href

的值

flutter build web --base-href=/project_aj/demo/gh-pages/

Answer 3

完成 Flutter 项目后，请按照以下步骤将其部署到 GitHub Pages 上：

1。检查 Web 文件夹： 确保您的项目包含 Web 文件夹。如果不存在，请使用以下命令创建一个：

flutter create .

此命令会在当前目录中初始化 Flutter Web 项目，创建必要的文件和文件夹。

2。更新基本 URL： 在 Web 文件夹中，找到

index.html

文件。在此文件中，找到该部分中的标记。将 href 属性替换为 GitHub 存储库的 URL。这是托管您的 Flutter 项目的 URL。

    <base href="https://username.github.io/" />

3.构建项目： 运行以下命令来构建 Flutter Web 项目：

flutter build web

此命令生成 Web 部署所需的文件。

4。上传到 GitHub： 将生成的构建文件上传到您的 GitHub 存储库。您可以通过提交 build/web 文件夹的内容并将其推送到您的存储库来完成此操作。