Asp.Net Core MVC特定路由下CSS、JS文件加载异常问题咨询

这是静态资源使用相对路径引用导致的路由层级拼接问题，触发逻辑如下：
你在公共布局文件Views/Shared/_Layout.cshtml中引用JS、CSS资源时使用了不带根路径前缀的相对写法，例如：

<script src="assets/js/jquery.min.js"></script>
<link rel="stylesheet" href="assets/css/site.css">

相对路径的寻址规则是基于当前浏览器地址栏的路由路径拼接：

• 访问首页/时，路径会以域名为根拼接，最终资源请求地址为/assets/js/jquery.min.js，资源可正常加载
• 访问/Role/Create这类二级路由时，路径会以当前路由的父级/Role/为基准拼接，最终资源请求地址变成/Role/assets/js/jquery.min.js，找不到对应资源就会报错。

以下两种方案都可以解决问题，按需选择即可：

方案1：使用根路径绝对引用 #

最简单的适配方案，所有资源引用路径开头加/，强制从网站根路径开始寻址：

<script src="/assets/js/jquery.min.js"></script>
<link rel="stylesheet" href="/assets/css/site.css">

适合项目直接部署在域名根目录的场景。

方案2：使用ASP.NET Core内置根路径标记 #

如果项目后续可能部署在域名子目录（比如反向代理到域名下的某个子路径），可以使用~标记代表应用根路径，ASP.NET Core运行时会自动转换为正确的前缀：

<script src="~/assets/js/jquery.min.js"></script>
<link rel="stylesheet" href="~/assets/css/site.css">

还可以额外添加asp-append-version="true"属性，框架会自动为资源追加哈希版本号，解决浏览器静态资源缓存更新不及时的问题。

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