母版页已引入script脚本，子页面是否需要重复引用及404报错如何处理？

问题原因 #

你遇到的404报错和是否重复引入脚本无关，是资源引用的路径规则导致的：
你当前使用的是相对当前页面路径的写法：

<script src="scripts/jquery-3.4.1.min.js" type="text/javascript"></script>

当页面在站点根目录时，浏览器会请求域名/scripts/jquery-3.4.1.min.js，路径正确无报错；当访问/Pages/目录下的子页面时，浏览器会自动拼接当前页面路径，请求域名/Pages/scripts/jquery-3.4.1.min.js，资源不存在就触发404。

解决方案 #

不需要在子页面重复引入脚本，只要修改母版页里的资源引用规则即可，可选方案如下：

• 改用站点根绝对路径引用：给路径开头加斜杠，强制从站点根目录开始匹配资源，所有层级的页面都能正常加载

  <script src="/scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
  

• 用服务端模板语法适配：如果你用的是ASP.NET等带服务端渲染的框架，可以用框架自带的根路径标记，适配站点部署在虚拟二级目录的场景，比如ASP.NET中写法为：

  <script src="~/scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
  

• 统一配置基础路径：如果有大量相对路径资源需要修改，可以直接在母版页的<head>标签内添加base标记，后续所有相对路径资源都会基于这个配置的路径解析：

  <base href="/你的站点根路径/">
  

注意事项 #

不要在子页面重复引入同一份jquery脚本，重复加载会导致之前绑定的事件、注册的jquery插件被重置，引发意料之外的逻辑问题。

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