.NET 8 Preview 7 Blazor Web App子路由部署后资源及路由异常求助

针对你用.NET 8 Preview 7创建Blazor Web App，配置子路由/mySubPath后遇到的资源加载和路由问题，按以下步骤修复：

1. 调整Program.cs的端点映射配置 #

不要直接用MapGroup映射App组件，正确配置Blazor端点与子路径的关联：

// 方式1：直接指定子路径
app.MapBlazorHub("/mySubPath/_blazor");
app.MapFallbackToPage("/mySubPath/{*path:nonfile}", "/_Host");

// 方式2：使用MapGroup分组
var subPathGroup = app.MapGroup("/mySubPath");
subPathGroup.MapBlazorHub();
subPathGroup.MapFallbackToPage("/{*path:nonfile}", "/_Host");

注意：/_Host是默认的宿主页面路径，若你修改了宿主页面的位置，需对应调整路径。

2. 修正宿主页面的资源引用 #

在_Host.cshtml中，确保框架资源和样式文件使用相对路径，依托<base>标签自动解析子路径：

• 框架脚本引用：

<script src="_framework/blazor.web.js"></script>

• 组件样式引用：

<link href="BlazorApp1.styles.css" rel="stylesheet" />

3. 确认标签的正确设置 #

在_Host.cshtml的<head>区域（而非App.razor）设置<base>标签，确保末尾斜杠存在：

<base href="/mySubPath/" />

Blazor Web App的<base>标签通常配置在宿主页面，而非根组件中，这样能确保所有资源和路由都基于该路径解析。

4. 修复路由失效问题 #

• 所有页面链接使用NavLink组件，路径无需手动添加子路径前缀：

<NavLink href="/counter" Match="NavLinkMatch.All">Counter</NavLink>

该链接会自动基于<base>标签解析为/mySubPath/counter。

• 使用NavigationManager跳转时，同样直接写相对路由即可：

NavigationManager.NavigateTo("/counter");

5. 验证静态文件中间件顺序 #

确保Program.cs中UseStaticFiles在Blazor端点配置之前执行，保证静态资源能被正确加载：

app.UseStaticFiles();

// 后续配置Blazor端点
app.MapBlazorHub();
app.MapFallbackToPage(...);

内容的提问来源于stack exchange，提问作者mMilk