在前端开发中，静态资源的处理是一个非常重要的环节，而 serve-static 是一款基于 Node.js 的 npm 包，用于服务端发送静态文件至客户端。本文将为大家介绍如何使用 serve-static 包。
安装
安装 serve-static 很简单，只需要在命令行中输入以下命令即可：
npm install serve-static
使用
基本用法
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ----------- - ------------------------ ----- --- - ---------- -- - ------ ---------- ------------------------------- ---------------- -- -- - ------------------- ------- -- ------------------------- ---
上述代码中，我们首先引入了 express 和 serve-static 两个包，并创建了一个 Express 应用实例。接着，我们使用 serve-static 中间件将 public 目录下的所有文件设置为静态文件，最后启动服务器并监听端口 3000。
高级用法
除了将整个目录设置为静态文件，serve-static 还提供了一些高级功能。
- 设置缓存时间
app.use(serveStatic('public', { maxAge: '1d' }));上述代码中，我们通过 maxAge 属性设置了浏览器缓存时间为 1 天，这意味着客户端在 1 天之内不会再向服务器请求同一文件。
- 设置响应头
app.use(serveStatic('public', {
setHeaders: (res, path) => {
res.setHeader('Cache-Control', 'public, max-age=31536000');
}
}));上述代码中，我们通过 setHeaders 回调函数设置了响应头的缓存控制策略，这意味着客户端在发起请求时会自动带上该缓存策略。
注意事项
使用 serve-static 过程中需要注意以下几点：
- 目标目录必须存在，并且具有可读权限；
- 目标目录下所有文件对访问者都是公开的；
- 最好将
serve-static中间件用在路由最后面，以便其他中间件优先处理。
总结
本文介绍了 serve-static 包的安装和使用方法，以及一些高级用法和注意事项。在使用中间件时，需要根据实际情况进行配置，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47582