Node.js+Express中Handlebars模板无法加载静态CSS文件怎么办？

你的核心问题出在静态文件夹的路径拼接错误，直接用__dirname + 'public'会导致路径拼接异常——__dirname代表当前index.js所在的src目录，拼接后会变成srcpublic（缺少路径分隔符），Express根本找不到这个文件夹。

修复步骤： #

1. 修正静态文件配置代码
   将index.js中原来的静态文件配置：

app.use(express.static(__dirname + 'public'));

替换为：

app.use(express.static(path.join(__dirname, '../public')));

使用path.join可以自动适配不同操作系统的路径分隔符（Windows用\，Linux/macOS用/），同时../会从src目录向上跳一级，精准定位到项目根目录下的public文件夹。

2. （可选）验证路径正确性
   可以在配置前添加一行代码打印路径，确认是否指向正确的public文件夹：

console.log('静态文件夹路径：', path.join(__dirname, '../public'));

启动服务后查看控制台输出，确保路径是你的项目根目录下public文件夹的绝对路径。

3. 确认模板中的引用
   你的home.hbs里的CSS引用<link rel="stylesheet" href="home.css">是正确的，因为Express将public设为静态文件夹后，根路径(/)就能直接访问public内的文件，无需额外路径前缀。

修正后的index.js关键部分示例： #

const express=require("express")
const app=express()
const PORT = 80;
const path=require("path")
const hbs=require("hbs")
const collection=require("./mongodb")
const templatePath=path.join(__dirname, '../templates')

const cookieParser = require("cookie-parser");
const sessions = require('express-session');

// 修正后的静态文件配置
app.use(express.static(path.join(__dirname, '../public')));

// 其余代码保持不变...

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