.NET Core中CSHTML调用自定义JS/CSS文件的路径问题

嘿，我来帮你搞定这两个问题，咱们一步步来：

一、静态资源路径的正确配置 #

你现在用的../css/all.css这种相对路径在.NET Core里是不对的，因为wwwroot是官方指定的静态文件根目录，所有前端资源都应该放在这里，而且要通过特定的路径规则引用：

1. 正确的资源引用写法 #

把你的引用改成用~开头的路径，~会被.NET Core自动解析为wwwroot的根路径：

<head>
    <!-- 加载CSS -->
    <link rel="stylesheet" href="~/css/all.css" />
</head>
<body>
    <!-- 加载JS -->
    <script src="~/js/Jquery3.4.1.min.js"></script>
</body>

如果想优化缓存，还可以加上ASP.NET Core的标签助手asp-append-version，它会自动给资源URL加版本号，避免浏览器缓存旧资源：

<link rel="stylesheet" href="~/css/all.css" asp-append-version="true" />
<script src="~/js/Jquery3.4.1.min.js" asp-append-version="true"></script>

2. 确保静态文件中间件已配置 #

在.NET Core中，必须启用静态文件中间件才能访问wwwroot里的资源：

• 如果是.NET 6+（用Program.cs），要确保有这行代码：

var app = builder.Build();

// 这行必须加，放在路由配置之前
app.UseStaticFiles();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

• 如果是旧版本（用Startup.cs），要在Configure方法里添加：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ...其他中间件
    app.UseStaticFiles();
    // ...路由配置
}

二、VS Code不显示wwwroot文件的问题 #

这大概率是VS Code的文件排除设置把wwwroot隐藏了，解决方法：

• 打开VS Code的设置（快捷键Ctrl+,），搜索files.exclude
• 检查列表里有没有wwwroot/**这一项，如果有，取消勾选它
• 或者直接打开项目根目录下的.vscode/settings.json，删除类似下面的配置：

"files.exclude": {
    "wwwroot/**": true
}

另外要确认你的wwwroot文件夹确实在项目根目录下（也就是和Views、Controllers文件夹同级，在TechBlog.Web目录里面），如果放错位置也会导致看不到或者加载失败。

最后再检查一遍 #

1. wwwroot位置正确，里面的css、js文件夹结构没问题
2. 已经启用了UseStaticFiles中间件
3. 资源引用用~/开头的路径
4. VS Code的文件排除设置没隐藏wwwroot

这样应该就能解决资源加载和文件显示的问题啦！

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