Express Serve Static - JavaScript

express serve static 是一种用于在 Node.js 应用程序中提供静态文件的中间件。它使用 Express.js 框架的 express.static 函数处理静态文件请求。它可以用来提供图片、CSS、JavaScript 等静态资源。在本文中，我们将学习如何在 Node.js 应用程序中使用 express serve static 来为我们的应用程序提供静态资源。

安装

要使用 express serve static ，我们需要先安装 Node.js 和 Express.js。可以使用以下命令来安装它们：

npm install express serve-static --save

配置

使用 express serve static 中间件非常简单，只需使用以下代码即可：

const express = require('express');
const serveStatic = require('serve-static');

const app = express();

app.use(serveStatic('public'));

app.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});

上面的代码将静态文件存储在 public 目录中。您可以根据需要更改存储静态文件的目录。例如，如果您需要将静态文件存储在 static 目录中，则可以使用以下代码：

app.use(serveStatic('static'));

您还可以将多个静态文件目录添加到中间件中，如下所示：

app.use(serveStatic('public'));
app.use('/images', serveStatic('images'));

上面的代码将静态文件存储在 public 和 images 目录中。

静态文件的使用

现在，我们已经配置了 express serve static ，让我们看看如何在我们的应用程序中使用静态资源。

图片

要将图像添加到您的应用程序中，请使用以下 HTML 代码：

<img src="/images/logo.png" alt="Logo">

上面的代码将查找 images 目录中的 logo.png 文件并将其添加到您的应用程序中。

CSS

要将 CSS 添加到您的应用程序中，请使用以下 HTML 代码：

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

上面的代码将查找 css 目录中的 style.css 文件并将其添加到您的应用程序中。

JavaScript

要将 JavaScript 添加到您的应用程序中，请使用以下 HTML 代码：

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

上面的代码将查找 js 目录中的 main.js 文件并将其添加到您的应用程序中。

结论

express serve static 是一种在 Node.js 应用程序中提供静态资源的简单方法。它不需要任何配置和操作，可以轻松地将静态文件添加到您的应用程序中。如今，Web 应用程序中使用静态资源变得非常普遍，因此使用此中间件可以轻松地将它们添加到您的应用程序中。