Blazor WASM自定义元素仅在Razor Pages根页面生效问题求助

问题场景 #

我基于托管在ASP.NET Core Razor Pages中的.NET7 Blazor自定义元素示例项目，更新到最新.NET7版本并移除了已废弃的<script src="_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>脚本后，遇到以下问题：

• 将自定义元素<my-counter title="Khalid" increment-amount="2" />添加到/privacy页面时，触发404错误：GET https://localhost:7213/Privacy/_content/Microsoft.AspNetCore.Components.CustomElements/Microsoft.AspNetCore.Components.CustomElements.lib.module.js net::ERR_ABORTED 404
• 添加到/some/routed/page这类多级路由页面时，触发404错误：blazor.webassembly.js: GET https://localhost:7213/some/routed/_framework/blazor.boot.json 404

补充情况：移除BlazorSolo.Components.csproj中的<PackageReference Include="Microsoft.AspNetCore.Components.CustomElements" Version="7.0.1" />引用后，用旧方式<component type="typeof(Counter)" param-title="@("the title")" param-IncrementAmount="3" render-mode="WebAssemblyPrerendered" />实例化组件可在所有页面正常工作；但只要保留该包引用，即便移除builder.RootComponents.RegisterCustomElement<Counter>("my-counter");和<my-counter>标签，旧方式也会触发相同错误。

问题原因 #

这是Microsoft.AspNetCore.Components.CustomElements包的一个路径问题：包在自动注入相关脚本时，使用了相对路径而非根路径，导致浏览器在非根目录的路由页面中，会从当前页面路径下去寻找资源文件，而非网站根目录，最终引发404错误。

解决方案 #

1. 设置网站基础路径 #

在Razor Pages的布局文件（如_Layout.cshtml）的<head>区域添加<base href="/" />标签，强制所有资源请求从网站根路径发起：

<head>
    <base href="/" />
    <!-- 其他页面头部内容 -->
</head>

这是解决路径问题最核心的一步，确保所有静态资源、Blazor框架文件都能被正确定位。

2. 手动指定CustomElements脚本的绝对路径 #

如果基础路径设置后仍存在脚本加载问题，可以手动添加脚本引用并使用绝对路径：

<script src="/_content/Microsoft.AspNetCore.Components.CustomElements/Microsoft.AspNetCore.Components.CustomElements.lib.module.js"></script>

绕过包的自动注入逻辑，直接指定根路径下的脚本文件。

3. 检查静态资源中间件配置 #

确保Program.cs中已正确注册静态资源服务，且该中间件在路由相关中间件之前：

var builder = WebApplication.CreateBuilder(args);

// 添加服务...

var app = builder.Build();

// 先注册静态资源中间件
app.UseStaticFiles();

// 再注册Razor Pages和Blazor相关路由
app.MapRazorPages();
app.MapBlazorHub();

app.Run();

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