Express 中如何正确设置静态文件路径？

上官雅茹提问于 2026-03-15 12:22:23 阅读 53

前端

我在用 Express 搭一个简单的前端页面，把 HTML 和 CSS 放在 public 文件夹里，但浏览器一直报 404 找不到样式文件。我明明用了 express.static 啊？

这是我的目录结构：

project/
├── app.js
└── public/
    ├── index.html
    └── style.css

这是我的 Express 配置：

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

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

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

app.listen(3000);

HTML 里引用 CSS 是这样写的：<link rel="stylesheet" href="style.css" rel="external nofollow" >，但打开页面时控制台显示 GET http://localhost:3000/style.css 404。到底哪里错了？

我来解答赞 7 收藏

反馈

2 条解答

萌新.景红 Lv1

首先你要检查一下你的代码，从你提供的信息来看，你的 Express 设置看起来是正确的。但是有时候细节决定成败，我们一步一步来排查问题。

首先你要确保你的 app.use(express.static('public')); 这一行代码确实被执行了。通常这个位置没问题，但还是得确认一下。

然后你要看看你的 HTML 文件是否正确引用了 CSS 文件。你写的是，这在大多数情况下是没问题的，因为它会相对于当前页面的位置去找 style.css。既然你放在 public 文件夹里，这样引用是正确的。

不过为了排除其他可能的问题，我们可以稍微调整一下，确保路径没有问题。你可以尝试给 CSS 引用加上 / 前缀，变成。这样浏览器就知道从根目录开始找 style.css 文件了。

接下来，我们要确保你的 Express 应用在正确的端口上监听，并且没有被防火墙或其他东西阻止。你已经设置了 app.listen(3000);，这是对的，确保你的浏览器访问的也是 http://localhost:3000/。

最后，让我们来检查一下你的文件路径。你的 app.get('/', (req, res) => { res.sendFile(__dirname + '/public/index.html'); }); 这一段代码看起来也是正确的。__dirname 会返回当前执行脚本所在的目录，所以 __dirname + '/public/index.html' 会指向你的 index.html 文件。

如果我们做了上述所有检查，问题还是存在，那可能是你的 node_modules 或者 Express 安装有问题。你可以尝试删除 node_modules 文件夹和 package-lock.json 文件，然后重新运行 npm install 来重新安装依赖。

如果你还遇到问题，可以尝试简化你的项目，只保留最基本的部分，比如只保留 app.js 和 public/index.html，看是否还能复现问题。这样可以更好地定位问题所在。

希望这些步骤能帮助你解决问题，有时候开发就是这样的，需要一步步排查，找到那个小小的细节导致的问题。加油！

2026-03-21 18:05

开发者思源 Lv1

问题在于 express.static 用的是相对路径，启动服务的目录不对就找不到。改成绝对路径就行：

const express = require('express');

const path = require('path');

const app = express();



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



app.get('/', (req, res) => {

  res.sendFile(path.join(__dirname, 'public', 'index.html'));

});



app.listen(3000);

用 path.join(__dirname, 'public') 确保路径是相对于 app.js 文件所在的绝对路径，这样不管从哪个目录启动都能找到。

2026-03-17 16:01