Express.js中HTML加载正常但CSS无法加载的问题求助

我现在跟着教程做一个服装电商网站，Express.js服务器能正常加载HTML页面，但CSS样式完全没生效。我检查了文件路径还是找不到问题，有没有大佬能帮我看看？

我的项目文件结构（推测） #

- 项目根目录
  - server.js
  - css/
    - home.css
  - js/
    - index.html
    - signup.html
    - 404.html
    - nav.js
    - home.js
    - footer.js
  - img/
    - light-logo.png
    - arrow.png
    - 其他产品图片

我的代码 #

server.js #

//importing packages
const express = require('express');
const admin = require('firebase-admin');
const bcrypt = require('bcrypt');
const path = require('path');

//declare static path
let staticPath = path.join(__dirname, "js");

//intializing express.js
const app = express();

//midlewares
app.use(express.static(staticPath));

//routes
//home route
app.get("/", (req, res) => {
  res.sendFile(path.join(staticPath, "index.html"));
})

//signup route
app.get("/signup", (req, res) => {
  res.sendFile(path.join(staticPath, "signup.html"));
})

// 404 route
app.get("/404", (req, res) => {
  res.sendFile(path.join(staticPath, "404.html"));
})

app.use((req, res) => {
  res.redirect('/404');
})

app.listen(3000, () => {
  console.log('listening on port 3000.......');
})

index.html（核心资源引用部分） #

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edga">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clothing - Best Apparels Online Store</title>
<link rel="stylesheet" type="text/css" href="../css/home.css">
</head>
<!-- 其他HTML内容省略 -->
<script src="../js/nav.js"></script>
<script src="../js/home.js"></script>
<script src="../js/footer.js"></script>

问题原因分析 #

核心问题出在静态文件服务的路径配置上：

• 你把staticPath设成了path.join(__dirname, "js")，这意味着Express只会把js目录下的文件作为静态资源提供。
• 但CSS在css目录、图片在img目录，这些目录不在js的管辖范围内，当HTML请求../css/home.css时，服务器找不到文件返回404，样式自然无法加载。
• 另外，浏览器的相对路径是基于当前URL的，访问localhost:3000/时，../css/home.css会被解析成localhost:3000/css/home.css，但你的服务器没配置这个路径的静态服务。

解决方案 #

方案1：把项目根目录设为静态资源根（推荐） #

修改server.js的静态路径配置，让Express能访问所有静态资源目录：

// 把静态根目录改成项目根目录
let staticPath = path.join(__dirname);
app.use(express.static(staticPath));

// 或者更简洁的写法：
// app.use(express.static(__dirname));

然后修改HTML里的资源引用路径，去掉开头的../，改成基于根目录的绝对路径：

<!-- CSS引用 -->
<link rel="stylesheet" type="text/css" href="/css/home.css">

<!-- 图片引用示例 -->
<img src="/img/light-logo.png" class="logo" alt="">

<!-- JS引用示例 -->
<script src="/js/nav.js"></script>

方案2：单独为每个静态目录配置服务 #

如果不想把根目录设为静态根，可以分别为每个资源目录配置静态服务：

app.use(express.static(path.join(__dirname, "css")));
app.use(express.static(path.join(__dirname, "js")));
app.use(express.static(path.join(__dirname, "img")));

这种情况下，HTML里的路径可以直接写/home.css、/light-logo.png，但不如方案1简洁。

额外检查点 #

• 确认文件结构和你预期一致，比如css/home.css确实存在于项目根目录下。
• 打开浏览器开发者工具（F12），查看Network标签里的CSS请求状态，如果是404，根据请求的URL再调整路径配置。

备注：内容来源于stack exchange，提问作者Erikas