在使用 Express.js 搭建网站时，有时候会遇到静态资源（如图片、样式表、JavaScript 文件等）无法访问的问题。这是因为 Express.js 默认情况下并不会自动处理静态资源，需要我们手动进行配置才能使其正常访问。
本文将介绍如何解决使用 Express.js 时静态资源访问不到的问题，并提供示例代码和详细的指导说明。
1. 配置 Express.js
要使 Express.js 能够处理静态资源，我们需要使用 express.static 中间件。该中间件会将指定目录下的文件作为静态资源进行处理，并将其发送给客户端。
下面是一个简单的示例代码，演示了如何使用 express.static 中间件来处理静态资源：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- -- - ------ ---------------- ---------------------------------- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
在上面的代码中，我们将 public 目录下的文件作为静态资源进行处理。当客户端请求静态资源时，Express.js 会自动在 public 目录下查找对应的文件，并将其发送给客户端。
2. 配置静态资源路径
默认情况下，Express.js 会将静态资源的访问路径映射到服务器根目录下。例如，如果我们将 public 目录下的 index.html 文件作为静态资源进行处理，那么客户端访问该文件的 URL 就是 http://localhost:3000/index.html。
如果我们希望将静态资源的访问路径映射到服务器的子路径下，可以通过配置 Express.js 的 static 方法来实现。例如，如果我们希望将静态资源的访问路径映射到 /static 子路径下，可以使用以下代码：
app.use('/static', express.static('public'));这样，客户端访问静态资源的 URL 就变成了 http://localhost:3000/static/index.html。
3. 配置多个静态资源目录
有时候，我们需要将多个目录下的文件作为静态资源进行处理。例如，我们可能需要将 public 目录和 assets 目录下的文件都作为静态资源进行处理。
这时，我们可以使用 Express.js 的 static 方法来实现。例如，以下代码演示了如何将 public 目录和 assets 目录下的文件都作为静态资源进行处理：
app.use(express.static('public'));
app.use(express.static('assets'));在上面的代码中，我们分别使用了两次 express.static 方法来指定不同的静态资源目录。当客户端请求静态资源时，Express.js 会先在 public 目录下查找对应的文件，如果找不到就会在 assets 目录下查找。
4. 使用 CDN
如果我们希望加速静态资源的访问速度，可以考虑使用 CDN（内容分发网络）。CDN 可以将静态资源缓存到全球各地的服务器上，从而加速客户端的访问速度。
要使用 CDN，我们需要将静态资源的 URL 指定为 CDN 的 URL。例如，以下代码演示了如何将静态资源的 URL 指定为 CDN 的 URL：
-- -------------------- ---- -------
-------------------------------- -
-- ------ --- --- --- - ---
-- ------ ------------ ------ --- ---
-- -------------------------
------- ------------
----------- ----- ----- -- -
-------------------------------------------- -----
------------------------------ -------- -------------------
------------------------ --- --------------- - ----------------------------
--
--------- ------
------ ------
----在上面的代码中，我们通过 express.static 方法的第二个参数来指定 CDN 的 URL。注意，我们还需要设置 maxAge、setHeaders、redirect 和 index 等选项，以确保静态资源能够正确地被缓存和访问。
结论
在使用 Express.js 搭建网站时，静态资源的处理非常重要。本文介绍了如何使用 express.static 方法来处理静态资源，并提供了详细的示例代码和指导说明。希望本文对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67637d08856ee0c1d41f1607