在前端开发中，静态文件已经成为了不可或缺的一部分。在使用 Express.js 开发 web 应用时，我们需要提供一个简单的静态文件服务器来加载脚本、样式和图片等资源文件。在本文中，我们会详细讨论 Express.js 中静态文件服务器的实现方式。
什么是静态文件服务器？
静态文件服务器是一种 web 服务器，可以提供静态内容的访问。例如，当浏览器请求一个 JavaScript 文件时，服务器将返回该文件的内容。这种服务器通常用于托管 web 应用程序中的静态资源，如 CSS、JavaScript 和图片等。
在 Express.js 中，我们可以使用内置的中间件 express.static 来创建一个静态文件服务器。
使用 express.static 中间件
在 Express.js 应用中使用 express.static 中间件是非常简单的，只需要在应用中设置一个静态资源目录即可。例如：
const express = require('express');
const app = express();
app.use(express.static('public'));
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});在上面的代码中，我们将静态资源目录设置为 public，即所有静态资源文件会被存放在 public 目录中。当我们在浏览器中访问 http://localhost:3000/styles.css 时，Express.js 会自动将 public 目录下的 styles.css 文件返回给浏览器。
配置静态资源目录
在使用 express.static 中间件时，我们需要指定存放静态资源文件的目录。在上面的例子中，我们将静态资源目录设置为 public。那么，如何指定其他的目录呢？
我们可以使用 path 模块来配置静态资源目录：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------- - ------------------- ----- --- - ---------- ----- ---------- - -------------------- ---------- ------------------------------------ ---------------- -- -- - ------------------- -- ------- -- ------------------------ ---
在上面的代码中，我们使用 path 模块中的 join 方法来拼接静态资源目录的路径，这里将静态资源目录设置为 static 目录，其中 __dirname 表示当前文件所在的目录。
静态文件服务器的其他配置选项
除了静态资源目录之外，express.static 中间件还提供一些其他的配置选项，例如：
maxAge
maxAge 选项用于设置静态文件的缓存时间，单位是毫秒。例如，我们将静态文件的缓存时间设置为 1 天：
app.use(express.static('public', {
maxAge: 86400000,
}));etag
etag 选项用于启用或禁用静态文件的缓存验证，默认值为 true。当设置为 false 时，可以提高服务器的性能和响应速度：
app.use(express.static('public', {
etag: false,
}));更多选项
除了上述两个选项之外，express.static 中间件还提供了其他一些选项，例如 setHeaders、fallthrough 和 index 等。具体的使用方法可以参考 Express.js 官方文档。
总结
在本文中，我们详细介绍了 Express.js 中静态文件服务器的实现方式。使用 express.static 中间件创建一个静态文件服务器非常简单，只需要设置一个静态资源目录即可。同时，我们还讨论了静态文件服务器的其他配置选项，这些选项可以帮助我们更好地控制、优化和保护我们的静态文件。希望本文对你有所帮助，祝你在前端开发中取得更好的成果！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a5e12e48841e9894256c2b