news 2026/5/1 4:54:29

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/3/16 4:10:36

从零搭建日志分析系统:es数据库手把手教程

从零搭建日志分析系统&#xff1a;Elasticsearch 实战手记当你的服务开始“失联”&#xff0c;你靠什么找回真相&#xff1f;想象一下这样的场景&#xff1a;凌晨两点&#xff0c;告警突然响起。线上 API 响应时间飙升&#xff0c;用户请求大面积超时。你登录服务器&#xff0c…

作者头像 李华
网站建设 2026/4/23 17:21:24

新手教程:如何正确完成libwebkit2gtk-4.1-0安装配置

如何在 Linux 上正确安装并配置 libwebkit2gtk-4.1&#xff1a;从踩坑到实战你是不是也遇到过这种情况&#xff1f;刚写好一个基于 GTK 的浏览器小程序&#xff0c;兴冲冲地编译运行&#xff0c;结果终端弹出一行红色错误&#xff1a;error while loading shared libraries: li…

作者头像 李华
网站建设 2026/4/29 19:52:48

USB接口有几种?图文详解主流类型

USB接口有几种&#xff1f;从“插不准”到“一线通”的演进之路 你有没有过这样的经历&#xff1a;手机没电了&#xff0c;急着充电&#xff0c;可那根USB线就是“死活插不进去”&#xff1f;翻来覆去试了三次&#xff0c;才对准方向——别怀疑自己&#xff0c;这正是 传统USB…

作者头像 李华
网站建设 2026/5/1 0:08:35

通信协议入门:rs232和rs485的区别全面讲解

从调试口到工业总线&#xff1a;RS232与RS485的本质差异与实战选型指南你有没有遇到过这样的场景&#xff1f;一台设备通过串口连不上PC&#xff0c;换根线就好了&#xff1b;或者在工厂里布了一圈RS485总线&#xff0c;结果数据乱跳、通信时断时续。更头疼的是&#xff0c;明明…

作者头像 李华
网站建设 2026/4/17 11:15:12

电车顶不住,涨价卖车,但外资油车降价狙击,进退失据!

2026刚开始部分电车企业的中低端车型已悄然涨价&#xff0c;显然他们无法承受补贴减少和购置税减半征收带来成本压力&#xff0c;而选择悄悄涨价&#xff0c;可是外资油车却不让他们喘息&#xff0c;率先降价反击&#xff0c;这让电车陷入两难境地。电车对于中低端车型悄然涨价…

作者头像 李华
网站建设 2026/4/23 8:13:37

4位全加器实验常见问题排查与数码管调试技巧

4位全加器联调实战&#xff1a;从电路搭建到数码管显示的完整排错指南 你有没有遇到过这种情况——逻辑设计明明无懈可击&#xff0c;Verilog代码仿真波形完美&#xff0c;结果一接到七段数码管上&#xff0c;显示出来的却是“8”变成“3”&#xff0c;或者“00”居然亮了两个数…

作者头像 李华