404 加载资源失败将 Flutter Web App 部署到 GitHub Pages答案

【问题标题】：404 Failed to load resource Deploying Flutter Web App to GitHub Pages404 加载资源失败将 Flutter Web App 部署到 GitHub Pages
【发布时间】：2021-04-17 17:21:12
【问题描述】：

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

我将代码推送到我的存储库： https://github.com/learyjk/superpacecalcweb

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

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

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

有什么想法吗？错误输出不是很冗长，所以我不太清楚从哪里开始......

GitHub 页面链接： https://learyjk.github.io/superpacecalcweb/

谢谢！

【问题讨论】：

标签： web-deployment github-pages flutter-web

【解决方案1】：

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

基本上，问题是颤振尝试定位 main.dart.js 文件而不考虑部署的基本路径，因为您没有使用正确的路径配置 base 标记。这是部署 Flutter Web 应用程序或任何 Web 应用程序时的常见问题，如果托管服务提供商添加了主域的附加路径。

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

请注意，在本地测试时，您仍然必须将其设置回href="/"。否则本地部署将不起作用。有一个开放的issue 可以进行配置。

【讨论】：

您，先生，应该加薪。谢谢！像魅力一样工作。
请注意，您可以更改源中的基本路径，即在 web/index.html 中，或在构建输出中，即在 build/web/index.html 中。如果您在源代码中更改它，它也将在构建输出中。 flutter build web 和 flutter run 都尊重源基本路径。
这是迄今为止最好的答案......荣誉。 ?
这对我有用。为了部署到 wamp 服务器，我只是将路径更改为。最初的值为并且服务器正在根文件夹中寻找资源。使用 chrome 开发工具有助于解决此问题。
嗨，我在使用 firebase 托管时遇到了同样的问题，但我有不止一个页面路由如何解决这个问题。我使用velocity_x: ^3.3.0 进行路由，因为这个插件使用flutter 2.0 导航

【解决方案2】：

如何自动化提出的解决方案

构建项目时使用：
flutter build web --release --base-href="/yourGithubRepoName/"
它会为你做所有需要的替换。

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

【讨论】：