如何在 Node EJS 中设置多个静态路径

当使用 Node.js 和 EJS 作为模板引擎开发 Web 应用时，我们经常需要在 HTML 文件中引用静态资源，如 CSS、JavaScript、图片等。本文将介绍如何在 EJS 中设置多个静态路径，以便让我们的应用加载各种资源。

了解 EJS 静态资源路径

在 EJS 中，我们可以使用以下代码引用静态资源：

<link rel="stylesheet" href="/static/css/style.css">

其中，/static 就是静态资源的路径。默认情况下，EJS 只能从项目根目录下的 public 文件夹中加载静态资源。如果需要访问其他路径下的静态资源，我们需要手动设置 EJS 的静态资源路径。

设置 EJS 静态资源路径

要设置 EJS 的静态资源路径，我们需要使用 express.static() 方法。该方法用于根据指定的路径设置静态资源的访问路径。我们可以将该方法传递给 express 应用程序的 use() 方法，来设置全局的静态资源路径。例如，要将 /public 目录下的静态资源设置为全局访问路径：

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

app.use(express.static(__dirname + '/public'));

上述代码将把 public 目录下的所有静态资源设置为全局访问路径，包括 CSS、JavaScript、图片等。

如果我们需要访问多个路径下的静态资源，可以在 express.static() 方法中传递一个包含多个路径的数组，例如：

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

app.use(express.static([__dirname + '/public', __dirname + '/static']));

上述代码中，我们将 public 和 static 目录下的所有静态资源都设置为了全局访问路径。

在 EJS 中引用多个静态资源路径

当我们设置了多个静态资源路径后，在 EJS 中引用这些资源的方式与单个路径相同：

<link rel="stylesheet" href="/static/css/style1.css">
<link rel="stylesheet" href="/static/css/style2.css">

在上述代码中，我们分别引用了两个静态 CSS 文件，它们均来自 static 目录下的 css 子目录。

结论

通过设置 EJS 的静态资源路径，我们可以轻松地访问多个路径下的静态资源。在开发 Web 应用时，这一功能十分实用。