news 2026/6/9 18:36:36

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
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标签,以确保应用能够正确处理导航和资源请求。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/10 9:50:23

IT自动分派单据如何实现?从规则到智能分派全解读

在IT运维现场&#xff0c;工单处理是否高效往往已经由“分派”确定。在系统上线初期很多企业还能依靠人工判断而随着系统数量、用户规模不断扩大即将由人工派单逐步成为瓶颈。正因为如此&#xff0c;IT自动分派单据已开始被越来越多IT团队视为基本能力兼运维流程中的关键一环&a…

作者头像 李华
网站建设 2026/6/9 18:30:55

nmodbus4类库在PLC通信中的应用完整指南

用 nmodbus4 打通工业通信——从零构建稳定可靠的 PLC 数据交互系统在现代工厂的控制室里&#xff0c;一台运行着 C# 编写的监控软件的工控机&#xff0c;正通过网线与远处的西门子 S7-1200 PLC 进行高速数据交换。温度、压力、电机状态实时刷新&#xff0c;一旦超过阈值&#…

作者头像 李华
网站建设 2026/6/10 13:19:49

零基础掌握HardFault异常处理机制的基本原理

破解HardFault之谜&#xff1a;从崩溃现场还原程序“死亡瞬间”你有没有遇到过这样的场景&#xff1f;代码烧进去&#xff0c;设备上电后一切正常&#xff0c;突然毫无征兆地卡死——没有日志、无法复现、JTAG一连才发现&#xff1a;程序停在了while(1)里&#xff0c;而调用栈清…

作者头像 李华
网站建设 2026/6/10 13:35:36

远程服务器部署Chrome Driver的操作手册

远程服务器部署 Chrome Driver&#xff1a;从零开始的实战指南 你有没有遇到过这样的场景&#xff1f;本地写好的 Selenium 脚本运行得好好的&#xff0c;一推到远程服务器就报错&#xff1a; WebDriverException: Message: unknown error: cannot find Chrome binary或者更…

作者头像 李华
网站建设 2026/6/10 11:27:15

PCAN通信模式配置核心要点解析

深入PCAN通信配置&#xff1a;从位定时到实战调优的完整指南在汽车电子和工业控制领域&#xff0c;CAN总线早已不是新鲜技术。但当你真正拿起PCAN设备准备调试ECU时&#xff0c;是否曾遇到过“明明接上了却收不到任何报文”的窘境&#xff1f;或者在产线测试中频繁触发Bus Off&…

作者头像 李华
网站建设 2026/6/10 11:21:24

基于Java+SpringBoot+SSM商场停车场管理系统(源码+LW+调试文档+讲解等)/商场停车系统/停车场管理方案/商场停车解决方案/智能停车场管理系统/商场车辆管理系统/停车场智能化管理

博主介绍 &#x1f497;博主介绍&#xff1a;✌全栈领域优质创作者&#xff0c;专注于Java、小程序、Python技术领域和计算机毕业项目实战✌&#x1f497; &#x1f447;&#x1f3fb; 精彩专栏 推荐订阅&#x1f447;&#x1f3fb; 2025-2026年最新1000个热门Java毕业设计选题…

作者头像 李华