Bootstrap及CSS文件在/list/:customListName路径失效问题排查与解决

问题现象 #

基于Express+EJS构建的TodoList项目中，访问/list/:customListName路径时，Bootstrap和自定义CSS文件均无法加载，浏览器控制台会出现静态资源404未找到的错误；但将路径改为/:customListName时，样式能正常生效。

问题根源 #

问题出在静态资源的相对路径解析逻辑：

• 在header.ejs中，CSS文件引用使用了相对路径：<link rel="stylesheet" href="css/style.css">
• 当访问根路径/或/:customListName时，浏览器会将相对路径解析为/css/style.css，这与Express通过express.static(__dirname + "/public")设置的静态资源路径（对应URL根目录下的/css/）匹配，所以能正确加载。
• 当访问/list/:customListName时，浏览器会把相对路径解析为/list/css/style.css，但该路径下不存在静态资源，因此加载失败。

解决方案 #

只需将静态资源的引用改为绝对路径，确保浏览器始终从根目录查找资源：

修改header.ejs中的CSS引用 #

把原来的相对路径：

<link rel="stylesheet" href="css/style.css">

改为带根路径的绝对路径：

<link rel="stylesheet" href="/css/style.css">

如果项目中使用了Bootstrap的本地文件，同样需要将其引用路径改为绝对路径；若使用CDN链接，则本身就是绝对路径，无需修改。

验证静态资源配置 #

确认Express的静态资源中间件配置正确（当前项目已配置）：

app.use(express.static(__dirname + "/public"));

该配置会将public文件夹下的内容映射到网站根目录，因此public/css/style.css对应的访问URL就是/css/style.css，与修改后的绝对路径完全匹配。

补充说明 #

当前项目中/delete和/的POST请求路径已经是绝对路径，无需修改；后续若新增相对路径的表单提交或资源引用，都需要注意这个路径解析逻辑问题。

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