Flutter应用程序通过Github网页空白屏幕

Question

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

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/belasting-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是一个变量，则可以对其进行修改。

如何？：向flutter build提供--base-href参数，如下所示

主机URL:https://<github_user_name>。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页面上：

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存储库。您可以通过提交构建/web文件夹的内容并将其推送到存储库中来完成此操作。