在使用 Express.js 进行静态文件服务时，有时候会遇到 404 错误的问题。而这个问题通常是由一些小问题导致的，但我们可以采取一些解决方法来解决它们。本文将带你了解一些解决方法。
问题分析
要解决这个问题，我们首先需要了解它的原因。对于静态文件服务，Express.js 默认会在控制台输出类似以下的信息：
GET /static/css/style.css 304 8.089 ms - - GET /static/js/script.js 304 8.119 ms - -
这里，我们可以看到浏览器请求了 /static/css/style.css 和 /static/js/script.js 两个文件，并且成功返回了 304 响应状态码。但是，如果我们遇到了 404 错误，会发现 Express.js 并没有输出该文件的相关信息，而是直接返回 404 给浏览器，当然我们需要知道该文件出了什么问题。
Express.js 用于托管静态文件的中间件是 express.static，默认情况下，它将托管的文件夹设置为根目录 /。也就是说，如果浏览器请求的文件路径不是你指定的目录下的，Express.js 就会返回 404 错误。
解决方法
为了解决这个问题，我们可以采取以下方法：
1. 指定托管的文件夹
由于 express.static 默认将托管的文件夹设置为根目录，我们需要显式地指定托管的文件夹。请使用以下代码片段将文件夹路径设置为自己的目录：
// 将 public 目录作为托管的目录 app.use(express.static(__dirname + '/public'));
这将使得 Express.js 托管 public 文件夹中的所有文件，并在控制台中输出响应状态码。
2. 确定路径是否正确
如果使用 express.static 托管文件夹之后，还有 404 错误出现，那么可能是文件路径有误。确定文件路径是否正确，需要注意以下几点：
- 文件夹名是否正确。
- 文件后缀是否正确。
- 是否包含查询参数或哈希值。
- 是否存在子文件夹。
3. 避免文件名重复
文件名重复也可能导致 404 错误。在引用文件时，我们需要避免文件名重复问题。例如，如果有两个文件名相同的 CSS 文件，那么浏览器只会加载其中一个，另一个就会返回 404 错误。
如果您不得不使用相同的文件名，可以将它们放在不同的文件夹目录下。这样可以避免文件名冲突并提高代码可读性。
示例代码
下面是一个示例代码，用于展示如何使用 express.static 中间件来托管静态文件：
const express = require('express');
const app = express();
// 托管 public 文件夹中的静态文件
app.use(express.static(__dirname + '/public'));
app.listen(3000, () => console.log('Server running on port 3000'));在 public 文件夹中，有一个 style.css 和一个 script.js 文件，你可以请求 localhost:3000/style.css 和 localhost:3000/script.js 来进行测试。
总结
在进行静态文件服务时，404 错误是一个常见问题，但并不难解决。通过使用 express.static 中间件来显式设置托管的文件夹，同时确认路径是否正确和避免文件名冲突，可以很好地解决这个问题。希望本文提供给你有相关的解决方法，能帮助你更好的进行前端开发工作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654f81b77d4982a6eb8747c7