ASP.Net Core 6托管Blazor Wasm作为IIS子应用时脚本与CSS加载失败

已完成的配置操作 #

1. index.html 新增代码 #

<base href="/coolApp/" />

<link href="_content/Blazored.Toast/blazored-toast.min.css" rel="stylesheet" />
<link href="PublicSite.Web.CLient.styles.css" rel="stylesheet" />

<script src="scripts/bootstrap.min.js"></script>
<script src="_framework/blazor.webassembly.js"></script>

2. Program.cs 新增代码 #

app.UsePathBase("/coolApp");

3. IIS 配置 #

出现的异常 #

解决步骤 #

• 确认IIS子应用的虚拟路径与/coolApp完全一致，同时检查应用程序池是否启用ASP.NET Core模块，站点已开启静态内容服务。
• 将硬编码的base href改为动态获取，避免路径不匹配：
  在index.html的<head>末尾添加以下脚本：

  <script>
      const baseTag = document.querySelector('base');
      const currentPath = window.location.pathname;
      baseTag.href = currentPath.endsWith('/') ? currentPath : `${currentPath}/`;
  </script>
  

• 调整Program.cs中UsePathBase的位置，必须放在路由中间件之前：

  var app = builder.Build();
  
  // 先设置路径基准，再配置路由
  app.UsePathBase("/coolApp");
  app.UseRouting();
  
  // 后续中间件配置（如授权、静态文件等）...
  

• 清空浏览器缓存，重启IIS应用池，重新发布应用包，确保所有静态资源路径正确映射到子应用路径。

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