Express.js 是当今最流行的 Node.js Web 框架之一，它可以快速地搭建 Web 应用程序。在使用 Express.js 开发 Web 应用程序时，我们通常需要提供一些静态文件（如 HTML、CSS、JS、图片等）给客户端访问。本文将为大家详细介绍如何使用 Express.js 提供静态文件服务。
为什么需要静态文件服务
Web 页面中通常需要加载各种文件，包括 HTML、CSS、JS、图片、字体等等。这些文件可以分为两种类型：动态文件和静态文件。动态文件通常需要服务器动态生成，如使用模板语言渲染的 HTML 文件、通过数据库查询生成的 JSON 文件等。而静态文件则是服务器直接返回给客户端的文件，一般不需要经过处理。
静态文件在 Web 开发中占据重要地位，因为由于其文件体积较小，可以直接由 CDN 加速，从而提高网页加载速度。为了提供静态文件服务，Web 服务器需要能够直接查找并返回这些静态资源，并在路由上进行一些映射，将请求路由到正确的文件目录下。
对于 Express.js 而言，它提供了一种极其方便的静态文件服务中间件——express.static。
使用 express.static 服务静态文件
Express.js 中的 express.static 中间件可以使我们方便地服务静态文件，这个方法接收一个参数，即静态文件所在的根目录。例如，下面我们可以将项目的 public 目录作为静态文件服务的根目录：
const express = require('express');
const app = express();
app.use(express.static('public'));假设我们有一个 public 目录，里面包含了 index.html、style.css、app.js 等文件，那么我们可以通过访问 http://localhost:3000/index.html、http://localhost:3000/style.css、http://localhost:3000/app.js 来访问这些文件。
值得注意的是，当访问 http://localhost:3000 时，会默认寻找到该目录下的 index.html 文件，因此也可以直接通过 http://localhost:3000 访问该文件。同时，我们还可以使用多个静态文件服务，为不同的路由服务不同的静态文件：
const express = require('express');
const app = express();
app.use('/public', express.static('public'));
app.use('/assets', express.static('assets'));此时，访问 /public 路由时会返回 public 目录下的静态文件，而访问 /assets 路由时会返回 assets 目录下的静态文件。
静态文件服务的配置选项
在使用 express.static 中间件时，我们可以传入一些配置选项，例如：
app.use(express.static('public', {
dotfiles: 'allow', // 允许访问 . 开头的文件，如 .htaccess
etag: true, // 生成 etag
lastModified: true, // 生成 last modified
setHeaders: function (res, path, stat) { // 设置响应头
res.set('x-timestamp', Date.now())
}
}))这些配置选项的意义如下：
dotfiles："allow"设为允许访问.filename的文件，"deny"设为禁止访问（默认为ignore，不处理此类文件）。etag：生成一个 ETag，用于判断文件是否有修改，以便浏览器从缓存中获取文件。lastModified：生成一个 Last-Modified 时间，用于判断文件是否有修改，以便浏览器从缓存中获取文件。setHeaders：设置响应头。
自定义静态文件服务
如果希望自己手动实现一个静态文件服务，也可以使用如下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - -----------------------
----- ---- - ----------------
----- ---- - ----------------
-------------------------- ----- ---- -
----- -------- - -------------------- ---------
--------------------------- -- -
-- -------------------- -
------ ------------------------------- -- -
------------------ -
--------------- ------------
---------- -------
---
---------------------- -- --- -------------------------------------------
---
- ---- -
----- ---- - ---------------------- -- ---------------------------
------------------ -
--------------- -----
---------- --------
---------------- --------------
---
----------------------------------------
-
---------- -- -
------------------ -
--------------- ------------
---
------------ --------
---
--------------- -- -- --------------------------------------这个代码监听 3000 端口，请求时将请求的文件路径解析出来，然后使用 fs.stat 异步操作获取文件信息。如果是目录，则列出目录下的所有文件；如果是文件，则根据文件类型（mime）返回对应的 Content-Type。文件读取时使用 fs.createReadStream，将文件内容传输到响应流中。如果找不到文件，则返回 404。
总结
Express.js 提供了一种非常简单的静态文件服务方式——使用 express.static 中间件。它可以自动推导文件 MIME 类型、在默认情况下会按顺序寻找多个同名文件类型并返回第一个，同时还支持在输出响应前处于响应头。同时，我们还可以使用自定义的代码实现静态文件服务并配置不同选项，更加灵活地处理 Web 开发中的静态资源。在实际开发中按需使用不同方法，才能更好地提高 Web 应用程序的性能与开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475f72c968c7c53b02f19c5