Blazor Web App 在 IIS 部署的基路径设置

引言

在使用 Blazor Web App 进行开发时，部署到 IIS 服务器是一个常见的选择。然而，许多开发者在部署过程中可能会遇到一些配置问题，特别是在处理基路径（Base Path）设置时。本文将详细介绍如何正确设置 Blazor Web App 的基路径，以解决在 IIS 下的部署问题。

实例背景

假设你使用 Visual Studio 2022 V17.8.2 创建了一个 Blazor Web App，并使用 Web Deploy 方式发布到 IIS 服务器上。你的应用发布在Default Web Site下的blazortest80目录中。

示例代码

program.cs

usingBlazorWebAppNet8.Components;varbuilder=WebApplication.CreateBuilder(args);// 添加服务到容器builder.Services.AddRazorComponents().AddInteractiveServerComponents();varapp=builder.Build();// 配置 HTTP 请求管道if(!app.Environment.IsDevelopment()){app.UseExceptionHandler("/Error",createScopeForErrors:true);// 默认 HSTS 值为 30 天。生产环境可能需要调整app.UseHsts();}app.UseHttpsRedirection();app.UseStaticFiles();app.UseAntiforgery();// 设置基路径app.UsePathBase("/blazortest80");app.MapRazorComponents<App>().AddInteractiveServerRenderMode();app.Run();

App.razor

<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><!-- 设置基路径 --><basehref="/blazortest80/"/><linkrel="stylesheet"href="bootstrap/bootstrap.min.css"/><linkrel="stylesheet"href="app.css"/><linkrel="stylesheet"href="BlazorWebAppNet8.styles.css"/><linkrel="icon"type="image/png"href="favicon.png"/><HeadOutlet/></head><body><Routes/><scriptsrc="_framework/blazor.web.js"></script></body></html>

问题描述

当你试图通过https://testserver.de/blazortest80访问应用时，可能会遇到页面无法加载的问题。这是因为 Blazor 应用需要正确的基路径来处理相对路径的导航。

解决方案

1. 在program.cs中设置UsePathBase:

   • 添加app.UsePathBase("/blazortest80");以告知应用其基路径。

2. 在App.razor中设置base标签:

   • 修改<base href="/" />为<base href="/blazortest80/" />。

这两个步骤确保了应用能够正确处理路径，避免了在 IIS 下的导航问题。

注意事项

• 如果你只设置了app.UsePathBase("/blazortest80");，访问应用时需要在 URL 末尾添加一个斜杠（/），如https://testserver.de/blazortest80/。
• 如果你同时设置了base标签和UsePathBase，则可以省略 URL 末尾的斜杠。

总结

通过正确设置基路径，Blazor Web App 在 IIS 下的部署可以顺利进行。开发者需要在program.cs中使用UsePathBase，并在App.razor中设置base标签，以确保应用能够正确处理导航和资源请求。