在开发基于 Express.js 的 web 应用程序时，经常需要向前端提供网页上的静态资源，比如图片、CSS 文件和 JavaScript 文件等。但是，有时候在访问这些静态资源时，可能会出现 404 错误，这会让用户的体验变得非常不友好。本文将介绍在 Express.js 中如何正确地提供静态文件，以避免 404 错误的发生。
为什么会出现静态文件 404 错误
在 Express.js 中，如果我们想要提供一个静态文件，通常会使用 express.static 函数来指定静态文件所在的目录：
app.use(express.static('public'))在上述代码中，我们将 public 目录指定为静态文件目录。如果我们在浏览器中访问 http://localhost:3000/images/logo.png，Express.js 就会在 public/images 目录下查找 logo.png 文件，并将其返回给浏览器。
但是，如果我们的目录结构如下图所示：
.
├── public
│ └── images
│ └── logo.png
└── routes
└── index.js我们在 routes/index.js 中定义了路由：
const express = require('express')
const router = express.Router()
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' })
})
module.exports = router然后，在浏览器中访问 http://localhost:3000/images/logo.png，就会出现 404 错误。
这是因为我们没有将 public 目录作为静态文件目录来处理，改进代码如下：
app.use(express.static(__dirname + '/public'))
现在，再次在浏览器中访问 http://localhost:3000/images/logo.png，就能正确地加载静态文件了。
如何处理各种类型的静态文件
除了简单地提供静态文件目录外，我们还需要考虑如何处理各种类型的静态文件，比如 HTML、CSS、JavaScript 和图片等。
HTML 文件
如果我们想要提供一个 HTML 文件，并且想将其作为模板进行渲染，可以使用 res.sendFile 函数来发送文件。在发送文件之前，需要使用 path.resolve 函数将文件路径转换为绝对路径，代码如下：
const path = require('path')
router.get('/home', function(req, res, next) {
const filePath = path.resolve(__dirname, '../views/home.html')
res.sendFile(filePath)
})CSS 文件
对于 CSS 文件，我们可以使用 express.static 函数来处理：
app.use(express.static(__dirname + '/public/stylesheets'))
一旦我们将 CSS 文件作为静态文件发送到客户端，浏览器就能直接引用它，而不需要使用<link>元素。
JavaScript 文件
对于 JavaScript 文件，我们也可以使用 express.static 函数来处理：
app.use(express.static(__dirname + '/public/javascripts'))
一旦我们将 JavaScript 文件作为静态文件发送到客户端，浏览器就能直接引用它，而不需要使用<script>元素。
图片文件
对于图片文件，我们也可以使用 express.static 函数来处理：
app.use(express.static(__dirname + '/public/images'))
一旦我们将图片文件作为静态文件发送到客户端，浏览器就能直接使用它，而不需要使用<img>元素。
总结
本文介绍了在 Express.js 中如何正确地提供静态文件，以避免 404 错误的发生。除了简单地提供静态文件目录外，我们还需要考虑如何处理各种类型的静态文件。通过本文的学习，相信读者已经掌握了正确的静态文件处理方法，并且可以在实际的开发中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b89167add4f0e0ff122ff7