使用 express.static 服务 HTML 文件时，页面内引用的 CSS、JS 等资源必须使用以 / 开头的根相对路径（root-relative path），而非 ../ 或 ./ 这类文件系统相对路径，否则浏览器会向错误的 URL 发起请求，导致 404。
使用 `express.static` 服务 html 文件时，页面内引用的 css、js 等资源必须使用以 `/` 开头的**根相对路径**（root-relative path），而非 `../` 或 `./` 这类文件系统相对路径，否则浏览器会向错误的 url 发起请求，导致 404。
在 Express 中，express.static(__dirname + "/public") 会将 /public 目录映射为 Web 根路径（即 http://localhost:4000/ 对应 ./public/）。这意味着：
- 浏览器访问
http://localhost:4000/时，Express 实际返回的是./public/index.html； - 但 HTML 中的
<script src="../codebase/library.js"></script>是基于当前 HTML 文件所在位置的文件系统路径解析的，而浏览器在 HTTP 上下文中并不理解..的语义——它只会将../codebase/library.js解析为相对于当前 URL（/）向上一级再拼接，即/codebase/library.js（这是正确的），但问题在于：../在根路径/下无效，且多数现代浏览器会直接忽略或误解析此类路径。更关键的是，你原始写法中../codebase/暗示index.html位于子目录（如/public/html/），但实际它在/public/根下，因此../会越界查找，最终导致 Express 将请求回退到默认路由（如返回index.html自身），造成 MIME 类型错误（返回 HTML 却被当作 JS/CSS 执行）。
✅ 正确做法是：所有静态资源引用统一使用以 / 开头的绝对路径（从网站根开始），确保与 express.static 的挂载逻辑对齐：
<html>
<head>
<title>Planner</title>
<script src="/codebase/library.js" charset="utf-8"></script>
<link href="/codebase/library.css" rel="stylesheet" type="text/css" charset="utf-8">
<link href="/styles.css" rel="stylesheet" type="text/css" charset="utf-8">
</head>
<body>
<script src="/app.js" type="text/javascript"></script>
</body>
</html>? 关键注意事项：
- 路径
/codebase/library.js表示请求http://localhost:4000/codebase/library.js，Express 会自动在./public/codebase/目录下查找该文件 → 因此你必须确保项目结构包含./public/codebase/library.js和./public/codebase/library.css； - 同理，
/styles.css对应./public/styles.css，/app.js对应./public/app.js； - 切勿使用
file://方式双击打开index.html来测试 —— 此时浏览器按本地文件系统解析../，行为与 HTTP 服务完全不同，会造成“本地能跑、服务器 404”的假象； - 若需支持多级子目录（如
/admin/index.html），仍应坚持用/开头路径，而非依赖base标签或动态路径拼接，以保持简洁与可维护性。
总结：Express 的 static 中间件不改变 HTML 内部路径解析规则，它只决定「哪个本地目录响应哪个 URL 前缀」。开发者需主动将 HTML 中的资源路径调整为与 Web 根对齐的根相对路径（/xxx），这是前后端分离部署中最基础也最关键的路径约定。
立即学习“前端免费学习笔记（深入）”；
