404 无法加载资源将 Flutter Web 应用程序部署到 GitHub 页面

Question

我正在尝试将我的 Flutter 应用程序部署到 GitHub Pages。应用程序运行良好flutter run -d chrome并使用成功构建flutter build web --release

部署活动日志显示成功部署。但是当我单击“查看部署”按钮时，我只会看到一个空白页面。Javascript 控制台说：

加载资源失败：服务器响应状态为 404 () https://learyjk.github.io/main.dart.js

我也尝试将 /index.html 附加到 URL 的末尾，但没有成功。

有任何想法吗？错误输出不是很详细，所以我不太知道从哪里开始......

谢谢！

Answer 1

有<base href=''/>标签在你的index.html。将其更改为 github 存储库的基本路径。在这种情况下，这将是<base href="/superpacecalcweb/"/>。如果你没有它，你可以将它添加到<head>标签中。

基本上问题是 flutter 尝试在main.dart.js不考虑部署的基本路径的情况下定位文件，因为您没有base使用正确的路径配置标签。如果托管服务提供商向主域添加了额外的路径，那么在部署 Flutter Web 应用程序或任何 Web 应用程序时，这是一个常见问题。

您可以main.dart.js通过以下链接看到可用。 https://learyjk.github.io/superpacecalcweb/main.dart.js

请注意，在本地测试时，您仍然必须将其设置回href="/". 否则本地部署将不起作用。有一个未解决的问题可以使此配置。

Answer 2

构建项目时使用：
flutter build web --release --base-href="/yourGithubRepoName/"
它将为您完成所有必需的替换。

在这种情况下，命令将是：
flutter build web --release --base-href="/superpacecalcweb/"