在现有ASP.NET Core 6 MVC项目集成Blazor的路径配置问题

核心结论 #

添加<base href="~/Blazor/" />确实会引发资源引用问题——base标签会将页面中所有相对URL的解析基准改为~/Blazor/，原本带~的CSS、jQuery脚本引用（如果是相对路径写法）会被错误解析为~/Blazor/xxx，导致资源加载失败。

解决办法 #

针对大型现有项目，优先选择对现有代码侵入性小的方案：

1. 不修改全局base标签，单独配置Blazor Hub与路由基准

这是对现有项目影响最小的方案，无需调整大量资源引用：

• 配置Blazor Hub路径：在Program.cs中给MapBlazorHub指定明确路径：

  app.UseEndpoints(endpoints =>
  {
      endpoints.MapControllerRoute(
          name: "default",
          pattern: "{controller=Home}/{action=Index}/{id?}");
      // 指定Blazor Hub的独立路径
      endpoints.MapBlazorHub("/Blazor/_blazor");
  });
  

• 设置Blazor路由基准：在承载Blazor组件的MVC视图或Blazor根组件中，手动指定NavigationManager的基地址，替代base标签的作用：

  @inject NavigationManager NavManager
  
  @code {
      protected override void OnInitialized()
      {
          // 告诉Blazor路由与Hub连接的基准路径
          NavManager.BaseUri = "/Blazor/";
      }
  }
  

  这样既保证Blazor组件切换时Hub连接不丢失，又不会影响原有MVC页面的资源引用规则。

2. 修正资源引用的绝对路径写法

如果必须使用base标签，可将所有带~的资源引用改为绝对路径生成方式，避免相对解析错误：

• 使用ASP.NET Core的标签助手生成绝对路径：

  <!-- 原写法 -->
  <link href="~/css/site.css" rel="stylesheet" />
  <script src="~/js/jquery.min.js"></script>
  
  <!-- 修改后用标签助手 -->
  <link rel="stylesheet" asp-href="~/css/site.css" />
  <script asp-src="~/js/jquery.min.js"></script>
  

• 或者使用@Url.Content生成绝对路径：

  <link href="@Url.Content("~/css/site.css")" rel="stylesheet" />
  <script src="@Url.Content("~/js/jquery.min.js")"></script>
  

  两种方式都会自动生成基于网站根目录的绝对URL，不受base标签影响。

3. 隔离base标签的作用范围

仅在承载Blazor组件的特定视图中添加base标签，不影响其他MVC页面：

• 创建独立的Blazor宿主视图（如BlazorHost.cshtml），仅在该视图中添加<base href="~/Blazor/" />，并挂载Blazor组件；
• 其他MVC页面继续使用原有布局，不引入该base标签，这样只有访问Blazor相关页面时才会应用新的路径规则。

4. 修复第三方脚本的硬编码路径

对于硬编码相对路径的第三方脚本（如jQuery Ajax请求），将其改为基于根目录的绝对路径：

// 原写法
$.get("api/data", function(data) { ... });

// 修改后
$.get("/api/data", function(data) { ... });
// 或更通用的方式
$.get(window.location.origin + "/api/data", function(data) { ... });

内容的提问来源于stack exchange，提问作者Andrеw