Blazor WASM页面刷新或直接访问URL时CSS/JS报404错误如何解决

• 静态资源引用使用了相对路径，且没有正确配置站点根路径标识。从报错信息可以看到，所有资源请求路径都自动拼接了/OrderEdit/前缀，这是因为浏览器刷新或者直接输入二级路由URL时，会将URL的最后一段路径/OrderEdit/识别为当前站点的相对目录，所有相对路径的资源请求都会默认加上该前缀，导致路径错误返回404。
• 平时通过菜单、NavigationManager跳转时走的是Blazor客户端路由，浏览器没有真正发起页面级请求，静态资源已经在首次进入站点时加载完成，所以不会触发该问题。

1. 修正静态资源引用路径
   将所有CSS、JS资源的引用路径改为根路径绝对路径，即在路径开头加/，比如：
   原引用：bootstrap/css/bootstrap.min.css?v=1
   修改为：/bootstrap/css/bootstrap.min.css?v=1
   包括Blazor运行时文件_framework/blazor.webassembly.js也要同步修改为/_framework/blazor.webassembly.js。

2. 检查base标签配置
   打开Blazor项目的入口页面（WebAssembly是wwwroot/index.html，Server是Pages/_Host.cshtml），确认head标签内的base配置正确：

<!-- 部署在站点根目录时配置 -->
<base href="/" />
<!-- 如果部署在子站点，比如域名下的/BlazorApp目录，配置为 -->
<base href="/BlazorApp/" />

该标签会告诉浏览器所有相对路径的资源请求都以href的配置作为根路径拼接。

3. 配置服务器端 fallback 路由
   单页应用所有非静态资源的请求都需要回退到入口页面，才能交给Blazor客户端路由处理。如果用ASP.NET Core托管，在Program.cs中添加对应配置：

• Blazor WebAssembly项目：

app.UseStaticFiles();
app.UseRouting();
// 加在路由配置之后，端点映射之前
app.MapFallbackToFile("index.html");

• Blazor Server项目：

app.MapFallbackToPage("/_Host");

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