Node.js嵌套路由下CSS样式无法加载问题求助

问题根源 #

你在EJS模板中引用CSS文件时用了相对路径（比如css/style.css）：

• 访问/login时，浏览器会把相对路径解析为/css/style.css，匹配你配置的/css静态资源路由，样式正常加载；
• 访问嵌套路由/users/login时，浏览器会把相对路径拼接成/users/css/style.css，但服务器没有配置这个路由，导致请求404，样式失效。

解决方案 #

1. 把模板中的CSS引用改为绝对路径 #

将EJS文件里的CSS引用改成以/开头的绝对路径，确保无论当前路由层级如何，浏览器都会从根目录请求静态资源：

<!-- 错误写法（相对路径） -->
<link rel="stylesheet" href="css/style.css">

<!-- 正确写法（绝对路径） -->
<link rel="stylesheet" href="/css/style.css">

2. （可选）优化Express静态资源配置 #

可以用path.join统一静态资源路径的写法，避免不同操作系统下的路径分隔符问题，让代码更健壮：

// 替换原静态资源配置代码
app.use('/css', express.static(path.join(__dirname, 'css')));
app.use('/images', express.static(path.join(__dirname, 'imgs')));

验证 #

修改后重启服务器，访问/users/login，浏览器会正确请求/css/style.css，样式即可正常加载。

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