为什么我的 blazor 页面会在 github 页面上导致 404 错误？

Question

我正在尝试为我的 Blazor 项目设置一个 Github 页面站点。即使有一个全新的 blazor 项目，我也没有成功。按照人们在 .

上给出的说明，我在未修改的新项目中一直遇到 404 错误

你可以在 https://billybillyjim.github.io and the repro is at https://github.com/billybillyjim/billybillyjim.github.io

找到我目前的尝试

我目前的流程是这样的：

在 Visual Studio 2019 预览版 (3.0.100-preview6-012264) 中创建一个全新的客户端 Blazor 页面。
转到 Github 页面并创建一个名为 billybillyjim.github.io
使用桌面 Github 应用程序将存储库克隆到本地文件夹。
使用 VS2019 的构建菜单中的发布选项我select一个文件夹配置文件。
成功构建后，我将创建的文件从发布的文件夹移动到 repo 文件夹。
我提交并推送到 github。
我添加了一个 .nojekyll 文件，并将 SPA javascript 脚本添加到新的 404.html 和 index.html.

尝试加载页面时出现 404。 "Failed to load resource: the server responded with a status of 404 ()" 此错误适用于每个 dll 文件。

我尝试过的事情：

将所有内容放入文件夹，更改 index.html 中的基本 href，并将 SPA 脚本 segmentCount 设置为 1。

删除下划线并更新索引和两个 blazor.js 文件中的文件引用。

将 index.html 中的 href 更改为 the instructions here.

末尾所述的回购名称

我已经将我的设置与 https://github.com/blazor-demo/blazor-demo.github.io 上的示例页面进行了比较，该页面与我的设置非常相似，但是它已有一年的历史并且似乎使用了一组非常不同的 dll 和不同的 blazor.js.

我对网络开发完全陌生，所以我认为我很可能完全误解了一些简单的事情。

Answer 1

在 Git 页面上托管 Blazor 应用程序很痛苦。我尝试了多种方法，但不知何故导致了错误。但是，如果您正在寻找 Blazor 应用程序的免费有限部署选项，那么您可以尝试 Firebase。您可以参考我的文章 https://ankitsharmablogs.com/hosting-a-blazor-application-on-firebase/，了解有关在 Firebase 上托管 Blazor 应用程序的 step-by-step 指南。

Answer 2

我终于明白了！我不知道我以前怎么没注意到，但我的回购实际上并没有接受我的 bin 文件夹，它包含所有应用程序的 dll。所以看起来（也许是默认情况下？）Github 页面忽略了 bin 文件夹。首先我尝试编辑我的 repo 的 gitignore 文件，但它似乎没有更新以显示文件，所以我不得不使用 git add -f framework/bin/ 手动添加文件然后提交并推送。现在该网站正在运行！

Answer 3

让它为我工作的两个关键因素是：

在 blazor 索引页面中提供基本路径
从文件夹（例如 _framework 和 _bin 文件夹）中删除前导下划线。

修复基本路径

您需要执行此操作，因为 Blazor 应用程序中的文件引用了站点的根目录，并且 GitHub Pages 站点将您的项目名称作为路径的第一部分。

在 index.html 更改中： <base href="/" /> 到： <base href="/YOURPROJECTNAME/" />

这会使浏览器将您的项目名称添加到它获取的任何文件的路径开头。

如果您将 Blazor 应用存储在另一个子目录中，您还需要将其包含在基本路径中。

您可以通过查看浏览器的开发工具并检查它遇到的任何 404 的路径来判断这是否不起作用。

修复前导下划线

我必须：

从文件夹中删除下划线
在 index.html 和 framework\blazor.webassembly.js

自动化

我使用了一些 PowerShell post-publish 来组合这两个步骤：（请注意，您需要将 <base> 标签设置为项目的正确值）

(Get-Content .\public\blazor-sample\index.html) `
    -replace '<base href="/" />', '<base href="/lifti/blazor-sample/" />' `
    -replace '_framework', 'framework' |
    Out-File .\public\blazor-sample\index.html

Rename-Item .\public\blazor-sample\_framework "framework"
Rename-Item .\public\blazor-sample\framework\_bin "bin"
(Get-Content .\public\blazor-sample\framework\blazor.webassembly.js) `
    -replace '_framework', 'framework' `
    -replace '_bin', 'bin' |
    Out-File .\public\blazor-sample\framework\blazor.webassembly.js

Answer 4

对于发现此 post 并且在尝试使用 Azure 静态 Web 应用程序中的 Blazor 时遇到问题的任何人，请尝试创建一个 fallback route，因为这似乎修复在刷新或手动输入路由时出现的 404 错误。

在项目文件夹的根目录中（通常位于 App.razor 和 Program.cs 的位置），创建一个名为 staticwebapp.config.json 的新 JSON 文件并在其中放入如下内容：

{ "navigationFallback": { "rewrite": "/index.html", "exclude": ["/images/*.{png,jpg,gif}", "/css/*"] } }

假设您正在使用 GitHub，请不要忘记推送更改，等待 CI/CD 操作完成，然后进行测试。您现在应该能够刷新页面并手动输入路由。

参见同一页的 Configure Azure Static Web Apps for details about the file and what else it can do. More specific detail about the example above (and a detailed explanation of why it's needed) can be found in the Fallback Routes 部分。

值得注意的是，此方法不需要修改基本 href 或从 bin 或框架文件夹中删除任何 _。我在 Visual Studio 2022 年使用基础“Blazor WebAssembly App”模板进行了测试。

为什么我的 blazor 页面会在 github 页面上导致 404 错误？

Why does my blazor page result in 404 errors on github pages?

c#

http-status-code-404

github-pages

blazor

修复基本路径

修复前导下划线

自动化