如何访问 express 静态资源

入门案例

在浏览器中输入 http://localhost:8080/index.html 打开一个页面。这个 index.html 页面位于服务器上 assets 目录下。

const path = require("path");

const express = require("express");

const app = express();

app.use(express.static(path.join(__dirname, "assets")));

app.listen(8080, 'localhost', function() {
  console.log('server is running on 8080');
});
复制代码

问题：既然是访问 assets 目录下的 index.html 文件。为什么访问方式不是http://localhost:8080/assets/index.html，而是http://localhost:8080/index.html。这就牵涉到 express.static。

express.static 的工作原理

在 express 官方文档中，明确指出 express.static 是一个中间件函数。它的作用是服务于静态文件，它是基于 serve-static。

exports.static = require('serve-static');
复制代码

所以想知道 express.static 的详细使用方法，可以参考 serve-static 中间件。app.use(express.static(path.join(__dirname, "assets")))这段代码的含义是：任何路由都首先当成对静态资源的访问，如果 url 路径和 assets 目录下的某个文件匹配，那么直接返回这个资源。没有没有任何一项匹配，那么请求就当成动态资源请求。走路由表的逻辑。因此客户端对服务器的任何请求，首先都看出静态资源请求，当没有找到匹配的静态资源文件时，请求被视为动态资源请求。动态资源请求走路由逻辑。

设置多个静态资源目录

如果静态资源目录不止一个呢，如何处理？多指定几个目录作为静态资源目录就可以啦。

app.use(express.static(path.join(__dirname, "assets")));
app.use(express.static(path.join(__dirname, "public")));
复制代码

当在浏览器中输入http://localhost:8080/index.html 时，首先去 assets 目录下寻找 index.html 文件，如果找到，直接返回，不用往下执行。如果没有找到，再去 public 目录下寻找。归纳：静态资源目录的优先级和它定义的位置成正相关。

虚拟路径

对服务器的资源请求可以分为静态资源请求和动态资源请求。当用户在浏览器中输入http://localhost:8080/users 时，从字面上是无法区分这个一个静态资源请求还是动态资源请求。它可能是一个获取所有用户信息的 get 请求方法，它也有可能是一个获取 http://localhost:8080/users.html 的静态资源请求。为了从字面上进行区分，可以将所有的静态资源请求都添加一个前缀，比如 /static。这里的 /static 就是虚拟路径，它只存在于逻辑层面，物理层面并不存在。因此，当访问 http://localhost:8080/static/users 时，一看便知这是一个静态资源请求。