在 web 开发中，静态资源是无法避免的。图片、CSS、JavaScript 文件等都需要被加载到浏览器中供用户使用。在 Express.js 中，管理静态资源也是一个常见的需求。本文将向你介绍如何在 Express.js 中优雅的管理静态资源。
简介
在 Express.js 中，可以使用 express.static 中间件来托管静态文件。express.static 函数可以接受一个参数，即静态资源所在的目录。当有请求访问这个目录下的静态资源时，express 就会从这个目录中找到对应文件并返回给客户端。
使用
在 Express.js 应用中使用 express.static 中间件非常简单。只需要在根路由中调用 express.static 并传入静态资源所在的目录即可。
const express = require('express')
const app = express()
// 将 public 目录下的所有文件托管为静态资源
app.use(express.static('public'))
app.listen(3000, () => {
console.log('应用已启动...')
})如上所示，我们可以将 public 目录下的所有文件托管为静态资源。当我们访问 http://localhost:3000/assets/image.png 时，express 就会从 public 目录下寻找 assets/image.png 并将其返回给客户端。
在实际开发中，我建议将静态资源和动态资源分离开来。静态资源可以放在一个独立的目录下，方便进行管理和维护。
指定静态资源路径
在有些情况下，我们可能需要在多个目录中托管静态资源。此时，可以调用多次 express.static 函数，每次传入一个静态资源目录。
const express = require('express')
const app = express()
// 将 public 目录和 files 目录下的所有文件托管为静态资源
app.use(express.static('public'))
app.use(express.static('files'))
app.listen(3000, () => {
console.log('应用已启动...')
})如上所示，我们将 public 和 files 目录下的所有文件都托管为静态资源。
静态资源路由
在使用 express.static 时，express 默认将指定目录下的所有文件都托管为静态资源，这可能导致一些不必要的问题。比如我们想要托管的静态资源集中在某一个子目录中，但是这个子目录下也有一些文件不是静态资源，这些文件可能会被 express 当做静态资源处理导致出错。此时，我们需要使用静态资源路由。
静态资源路由可以指定哪些路径在请求时才会被处理成静态资源。
const express = require('express')
const app = express()
// 将 public 目录下的 images 和 css 目录托管为静态资源
app.use('/static', express.static('public', {
// 定义静态资源路由
// 只有以 /static/images 和 /static/css 开头的路径才会被处理成静态资源
// 其它路径会被忽略
dotfiles: 'ignore',
index: false,
etag: true,
maxAge: '1d',
redirect: false,
setHeaders: function (res, path, stat) {
res.set('x-timestamp', Date.now())
}
}))
app.listen(3000, () => {
console.log('应用已启动...')
})如上所示，我们通过将第一个参数传递给 app.use 方法，定义了静态资源路由。此时，只有以 /static/images 和 /static/css 开头的路径才会被处理成静态资源，其它路径会被忽略。
在这个例子中，我们还使用了一些参数来配置静态资源的缓存和响应头。
总结
本文向你介绍了如何在 Express.js 中优雅的管理静态资源。我们通过使用 express.static 中间件来托管静态文件，且可以指定静态资源路由和资源目录路径。同时，我们还介绍了一些可用的配置参数用于管理缓存和响应头。希望这篇文章能有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6594a3c1eb4cecbf2d8f3d51