Express+EJS博客中动态路由posts/:index的CSS未生效问题

问题根源 #

访问posts/:index这类动态路由页面时，若EJS模板用相对路径引用CSS（比如styles.css），浏览器会把它解析成posts/styles.css，但你的静态文件实际托管在根路径下，导致请求路径错误，样式加载失败。你添加的app.use('/posts/:index', express.static(__dirname + '/public/styles'))完全无效，因为express.static不支持动态路由参数匹配。

解决方案 #

步骤1：清理并优化静态文件托管配置 #

删掉那行无效的动态路由静态托管代码，只保留统一的静态资源托管规则。推荐把静态资源放在public目录下（结构更规范），调整代码如下：

// 托管整个public目录，包含styles、images等子目录
app.use(express.static(__dirname + '/public'));

如果想保留原有的public/styles目录结构，也可以给静态资源加个固定前缀，避免路径冲突：

// 所有以/styles开头的请求，都会映射到public/styles目录
app.use('/styles', express.static(__dirname + '/public/styles'));

步骤2：修改EJS模板的CSS引用路径 #

在所有EJS模板（包括post.ejs）里，用绝对路径引用CSS文件：

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

不管是首页还是动态路由页面，这个绝对路径都会让浏览器请求正确的静态资源地址。

验证效果 #

重启Express服务后，访问posts/:index页面，浏览器会正确请求/styles/styles.css，样式就能正常加载了。

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