.NET 9 Blazor WebAssembly独立应用设置BasePath后本地运行报错（404及未处理错误）

我明白你遇到的问题了——跟着官方文档改了<base>标签，结果本地运行要么报404，要么弹出未处理错误，确实挺挠头的。其实问题出在Blazor WebAssembly独立应用的本地开发服务器配置上，官方文档可能默认你是部署到生产环境（已经配置了路径映射），但本地调试时还需要额外一步。

先给你看一下你提供的代码（已经格式化正确）：

你的Program.cs代码（未修改） #

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using BlazorApp6;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

你的Index.html代码（仅修改了base标签） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorApp6</title>
    <base href="/test/" />
    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/app.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link href="BlazorApp6.styles.css" rel="stylesheet" />
    <link href="manifest.webmanifest" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
    <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
</head>
<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <span class="dismiss"></span>
    </div>

    <script src="_framework/blazor.webassembly.js"></script>
    <script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>

核心问题 #

Blazor WebAssembly独立应用的本地开发服务器（VS2022启动的Kestrel）默认把应用根目录映射到站点根路径（比如https://localhost:7276/），但你改了<base href="/test/" />后，应用会尝试从/test/路径加载静态资源（比如_framework/blazor.webassembly.js），但服务器根本没有把这些资源放在/test/路径下，自然就404了。

解决步骤 #

1. 修改本地开发服务器的应用URL（最关键）

让开发服务器把应用根目录映射到/test/路径：

• 右键你的Blazor项目 → 选择属性
• 切换到调试标签页
• 在应用URL输入框里，把原来的https://localhost:7276/改成https://localhost:7276/test/
• 保存设置，重新启动调试

或者直接修改项目根目录下的Properties/launchSettings.json文件，找到profiles里的applicationUrl字段，改成：

"applicationUrl": "https://localhost:7276/test/;http://localhost:5276/test/",

2. 确认HttpClient配置（你的代码已经正确）

你的Program.cs里已经用了builder.HostEnvironment.BaseAddress作为HttpClient的BaseAddress，这个值会自动读取<base>标签的地址，完全符合要求，不需要修改。

3. 清理重建项目（避免缓存问题）

有时候VS的缓存会导致资源路径不更新，建议：

• 点击顶部菜单 → 生成 → 清理解决方案
• 然后点击生成解决方案
• 最后重新启动调试

为什么官方文档只说改<base>标签？ #

官方文档的说明主要针对生产部署场景——比如你把应用部署到IIS、Nginx等服务器时，可以通过配置站点根目录或者反向代理，把/test/路径映射到你的应用文件目录，这时候只需要改<base>标签就够了。但本地开发时，VS启动的Kestrel服务器默认没有这个映射，所以需要额外配置应用URL。

内容来源于stack exchange