ExpressJS - 提供静态文件

静态文件是客户端从服务器直接下载的文件。创建一个新目录 public。默认情况下,Express 不允许您提供静态文件。您需要使用以下内置中间件启用它。

app.use(express.static('public'));

注意 − Express 查找相对于静态目录的文件,因此静态目录的名称不是 URL 的一部分。

请注意,根路由现在设置为您的公共目录,因此您加载的所有静态文件都将被视为公共目录。要测试这是否正常工作,请在新的 public 目录中添加任何图像文件,并将其名称更改为"testimage.jpg"。在您的视图中,创建一个新视图并包含此文件,例如 −

html
   head
   body
      h3 Testing static file serving:
      img(src = "/testimage.jpg", alt = "Testing Image

您应该得到以下输出 −

静态文件示例

多个静态目录

我们还可以使用以下程序设置多个静态资产目录 −

var express = require('express');
var app = express();

app.use(express.static('public'));
app.use(express.static('images'));

app.listen(3000);

虚拟路径前缀

我们还可以提供用于提供静态文件的路径前缀。例如,如果您想提供像 '/static' 这样的路径前缀,则需要在 index.js 文件中包括以下代码 −

var express = require('express');
var app = express();

app.use('/static', express.static('public'));

app.listen(3000);

现在,每当您需要包含一个文件(例如,位于公共目录中的名为 main.js 的脚本文件)时,请使用以下脚本标记 −

<script src = "/static/main.js" />

当将多个目录作为静态文件提供时,此技术非常有用。这些前缀可以帮助区分多个目录。