.NET 7现有ASP.NET Core项目添加Blazor WebAssembly遇404错误

你当前的配置存在几个关键错误，导致访问/clientapp时出现404，以下是针对性的修正方案：

1. 修正Blazor项目csproj的拼写错误 #

你在Blazor项目的csproj里写的<StaticWebAssetBaseBath>是拼写错误，正确的节点名称是<StaticWebAssetBasePath>，修改后：

<PropertyGroup>
  <StaticWebAssetBasePath>clientapp</StaticWebAssetBasePath>
</PropertyGroup>

2. 简化Blazor项目index.html的配置 #

不需要手动给所有link href添加clientapp前缀，base href会自动处理路径，保留正确的基准路径配置即可：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorWasmApp</title>
    <base href="/clientapp/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="css/app.css" />
    <link rel="stylesheet" href="BlazorWasmApp.styles.css" />
</head>

3. 修正现有ASP.NET项目Program.cs的中间件配置 #

中间件的执行顺序直接影响资源加载，你当前的配置顺序错误，且未正确设置路径基准。替换成以下代码：

if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}

// 处理Blazor WASM的路由分支
app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/clientapp"), blazorApp =>
{
    // 设置当前分支的路径基准
    blazorApp.UsePathBase("/clientapp");
    // 先启用静态文件服务，加载wwwroot资源
    blazorApp.UseStaticFiles();
    // 启用Blazor框架文件服务，处理WASM相关的特殊资源
    blazorApp.UseBlazorFrameworkFiles();
    // 启用路由系统
    blazorApp.UseRouting();
    // 配置SPA回退路由，确保Blazor的客户端路由能正常工作
    blazorApp.UseEndpoints(endpoints =>
    {
        endpoints.MapFallbackToFile("{*path:nonfile}", "index.html");
    });
});

关键说明： #

• UsePathBase必须放在分支内的最前面，让后续中间件识别当前的路径基准
• UseStaticFiles要早于UseBlazorFrameworkFiles，保证普通静态资源优先加载
• MapFallbackToFile不需要额外加/clientapp/前缀，因为UsePathBase已经统一处理了路径

4. 验证修复效果 #

1. 清理并重新生成整个解决方案
2. 运行ASP.NET Core应用，访问/clientapp即可正常加载Blazor WASM应用

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