Express跨目录静态文件服务问题：服务端与客户端分处不同位置

我来帮你捋清楚这个问题——你遇到的情况其实挺常见的，核心是要搞懂express.static的工作逻辑，以及排查几个容易踩的小坑。

首先，先拆解下你的现状：手动用sendFile能成功返回文件，说明路径本身是对的，但express.static失效，大概率是中间件配置的细节或者执行顺序出了问题。下面是具体的排查和解决步骤：

1. 先确认静态目录的路径绝对正确 #

虽然你用path.join(__dirname, '..', 'client')在sendFile里能用，但还是建议先打印这个路径的绝对地址，确保它真的指向你的静态文件目录：

const path = require('path');
console.log('静态目录绝对路径:', path.join(__dirname, '..', 'client'));

启动服务器后，看输出的路径是不是和你本地client目录的实际绝对路径完全一致（比如/Users/xxx/my-project/client或者D:\my-project\client）。如果路径不对，那肯定没法加载文件。

2. 检查中间件的注册顺序（最常见的坑！） #

Express的中间件和路由是按注册顺序匹配执行的。如果你把app.use(express.static(...))写在了其他路由（比如你手动处理/的GET请求）之后，那当访问/时，会优先触发前面的路由，完全轮不到静态文件中间件工作。

正确的做法是：把静态文件中间件放在所有路由的最前面，比如：

const express = require('express');
const path = require('path');
const app = express();

// 静态文件中间件要放在最前面！
app.use(express.static(path.join(__dirname, '..', 'client')));

// 其他路由放在后面
app.get('/api', (req, res) => {
  res.json({ msg: 'API响应' });
});

3. 配置默认索引文件（解决访问/时的空白问题） #

默认情况下，express.static访问目录根路径（比如/）时，会自动寻找目录下的index.html、index.htm等默认文件，但如果你的静态目录里的默认文件名不是这些，或者你想显式指定，就需要配置index选项：

app.use(express.static(path.join(__dirname, '..', 'client'), {
  index: 'home.html' // 改成你实际的默认文件名，比如index.html
}));

这样当你访问http://localhost:3000时，就会自动返回client/home.html（或者你指定的文件）。

4. 确认请求路径和文件的对应关系 #

比如你的client目录下有css/style.css，那你需要请求http://localhost:3000/css/style.css才能拿到这个文件，而不是http://localhost:3000/style.css。如果想把静态文件挂载到某个子路径下（比如/assets），可以这样写：

// 此时访问/assets/css/style.css 对应 client/css/style.css
app.use('/assets', express.static(path.join(__dirname, '..', 'client')));

完整示例代码 #

假设你的项目结构是这样的：

my-project/
├─ client/
│  ├─ index.html
│  ├─ css/
│  │  └─ style.css
│  └─ js/
│     └─ app.js
└─ server/
   └─ index.js

那server/index.js的正确代码应该是：

const express = require('express');
const path = require('path');
const app = express();

// 注册静态文件中间件，优先处理静态请求
app.use(express.static(path.join(__dirname, '..', 'client'), {
  index: 'index.html' // 显式指定默认索引文件
}));

// 其他业务路由
app.get('/api/user', (req, res) => {
  res.json({ name: 'Test User' });
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

最后再提个小细节：如果是在Linux/macOS环境下，文件名是大小写敏感的，比如你请求/CSS/style.css但实际文件是/css/style.css，就会返回404，这点要注意。

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