如何解决ASP.NET Core中静态文件引用的404错误？

错误原因 #

• 未启用静态文件中间件：ASP.NET Core框架默认不会自动处理静态文件请求，必须手动配置中间件，服务器才能识别并返回CSS、JS这类静态资源。
• 静态文件存放位置不符合默认约定：默认情况下，ASP.NET Core只会从wwwroot目录读取静态文件，如果你的css文件夹直接放在项目根目录（而非wwwroot内部），~/css/xxx.css的路径自然找不到对应文件。
• 未使用框架提供的路径解析工具：直接写~/路径，在未启用标签助手或Url辅助方法的情况下，浏览器拿到的路径可能没有被正确转换为实际可访问的URL，导致请求路径错误。

解决步骤 #

1. 检查并启用静态文件中间件
   打开Program.cs文件，确保在var app = builder.Build();之后、路由配置之前添加以下代码：

   app.UseStaticFiles();
   

   如果需要从非wwwroot目录读取静态文件，可配置自定义静态文件提供器：

   app.UseStaticFiles(new StaticFileOptions
   {
       FileProvider = new PhysicalFileProvider(
           Path.Combine(builder.Environment.ContentRootPath, "CustomStaticFiles")),
       RequestPath = "/StaticFiles"
   });
   

2. 确认静态文件目录结构
   确保css文件夹位于项目的wwwroot目录下，正确结构应为：

   项目根目录
   └── wwwroot
       └── css
           ├── features.css
           └── carousel.css
   

3. 使用正确的路径解析方式
   在CSHTML页面中，推荐使用框架提供的工具生成正确路径：

   • 方式一：使用标签助手
     打开_ViewImports.cshtml文件，添加标签助手引用：

     @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
     

     然后在页面中使用带版本缓存优化的link标签：

     <link rel="stylesheet" href="~/css/features.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/css/carousel.css" asp-append-version="true" />
     

   • 方式二：使用Url.Content辅助方法
     若不想用标签助手，可直接用@Url.Content解析路径：

     <link href="@Url.Content("~/css/features.css")" rel="stylesheet" />
     <link href="@Url.Content("~/css/carousel.css")" rel="stylesheet" />
     

4. 验证路径正确性
   运行项目后，打开浏览器开发者工具（F12），查看Network面板里的CSS请求地址，确认实际请求的URL是否和文件实际位置匹配，若项目有子应用路径，需对应调整请求路径。

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