同层级目录下Ejs公共头尾文件仅单页可用的路径问题求助

这种问题我碰到过好多次啦，核心原因就是静态资源的相对路径解析出了问题，咱们一步步来搞定它：

问题根源 #

你的首页和详情页虽然在同一层级目录，但访问路径不一样：

• 首页访问路径是 http://localhost:5000/，此时相对路径（比如scripts/lib/jquery-3.3.1.min.js）会被浏览器解析为根目录下的资源，也就是http://localhost:5000/scripts/lib/jquery-3.3.1.min.js，这是正确的。
• 而详情页的访问路径可能是http://localhost:5000/article/xxx，浏览器会把相对路径解析为http://localhost:5000/article/scripts/lib/jquery-3.3.1.min.js，这显然找不到对应的资源，所以就抛出了404错误。

解决方案 #

1. 改用根相对路径（最直接有效） #

把公共header/footer里所有静态资源的引用路径，都改成以/开头的根相对路径。这样不管当前页面在哪个子路径下，浏览器都会从网站根目录开始查找资源。

错误示例（相对路径）：

<script src="scripts/lib/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="styles/main.css">
<img src="images/logo.png" alt="logo">

正确示例（根相对路径）：

<script src="/scripts/lib/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="/styles/main.css">
<img src="/images/logo.png" alt="logo">

2. 确认服务器静态资源目录配置 #

如果用Express框架的话，要确保已经正确配置了静态资源目录，比如你的静态资源都放在public文件夹下，需要在服务器代码里加上：

app.use(express.static('public'));

这样根路径/scripts/...就会对应到public/scripts/...目录下的文件。

3. 统一验证所有资源引用 #

检查header/footer里的自定义脚本、第三方库、样式表、图片等所有资源的路径，确保没有遗漏的相对路径，全部改为根相对路径。

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