多个Handlebar模板无法读取CSS，index.hbs正常about.hbs异常求解决方案

开发者阿泽

2026-10-5

问题根因

该问题是静态资源引用路径和页面路由层级不匹配导致的：index.hbs一般对应网站根路由/，使用相对路径引用CSS时会直接匹配public目录下的资源；about.hbs通常对应/about这类二级路由，相对路径会在当前路由层级下寻找CSS文件，自然无法找到public目录下的目标文件。

解决方法

修改所有Handlebars模板中静态资源的引用路径为根路径绝对路径
如果你当前about.hbs中的CSS引用是href="css/[你的样式文件名].css"，直接修改为href="/css/[你的样式文件名].css"即可。路径开头的/代表直接从网站根目录开始寻址，完全不受当前页面的路由层级影响。
确认后端静态资源托管配置正确（以Express+Handlebars架构为例）
确保项目入口文件（通常为app.js/index.js）的静态资源托管配置正确，优先使用绝对路径避免寻址异常：
```
const express = require('express');
const path = require('path');
const app = express();

// 托管public目录下的静态资源
app.use(express.static(path.join(__dirname, 'public')));
```
故障排查：如果修改后仍然加载失败，打开浏览器控制台的「网络」标签，查看CSS文件的实际请求路径，对比public目录下的文件路径调整即可。