【无标题】

最新推荐文章于 2025-08-22 15:07:29 发布

人才程序员

最新推荐文章于 2025-08-22 15:07:29 发布

阅读量1k

点赞数 32

CC 4.0 BY-SA版权

分类专栏：前端三件套文章标签： css 前端 html5 javascript firefox node.js 后端

本文链接：https://blog.csdn.net/m0_62599305/article/details/145808989

前端三件套专栏收录该内容

207 篇文章

订阅专栏

文章目录

🌐 Express 中的静态资源处理

🌐 Express 中的静态资源处理

在 Web 开发中，静态资源通常指的是不需要服务器动态生成的内容，如 HTML 文件、CSS 样式表、JavaScript 文件、图片、字体等。对于一个 Web 应用来说，如何高效地管理和服务静态资源是非常重要的。Node.js 的 Web 框架 Express 提供了一个非常简单的方式来处理静态资源，这使得开发者可以更方便地管理这些文件。

在这篇文章中，我们将详细介绍如何在 Express 中处理静态资源，包括如何使用 Express 提供的内置中间件来服务静态文件、配置路径以及缓存控制等。🚀

🧐 1. 什么是静态资源？

静态资源是指内容不会随着每次请求而改变的文件，这些文件在服务器上是预先存在的，客户端可以直接访问并使用。这些资源通常包括：

HTML 文件：页面结构。
CSS 文件：页面样式。
JavaScript 文件：前端逻辑。
图片文件（如 .jpg, .png, .gif 等）。
字体文件（如 .woff, .ttf 等）。

与动态内容（如数据库查询结果）不同，静态资源不需要服务器进行计算，客户端可以直接获取。

⚡ 2. 如何在 Express 中处理静态资源？

Express 提供了一个名为 express.static 的内置中间件，用于处理静态文件。当用户请求静态文件时，Express 会自动查找并返回文件内容。你可以使用 express.static 来指定一个文件夹，让其内容作为静态资源被服务。

2.1 基本用法

假设我们有一个 public 文件夹，里面存放了静态资源，如 CSS、图片、JavaScript 文件等。以下是如何使用 Express 服务这些文件的示例。

示例：设置静态文件目录

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

const app = express();

// 使用 express.static 中间件来服务 public 目录中的静态文件
app.use(express.static(path.join(__dirname, 'public')));

// 启动服务器
app.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

在这个示例中：

path.join(__dirname, 'public') 设置了一个静态资源目录 public。
app.use(express.static(...)) 会将 public 目录中的所有文件作为静态文件服务。

访问静态资源

假设 public 目录下有一个 index.html 文件，浏览器访问 http://localhost:3000/index.html 时，Express 会返回该文件。如果 public 目录下有其他资源（如 .css, .js 或 .jpg 文件），同样可以通过对应的 URL 访问它们。

2.2 配置静态资源路径

你可以根据需要配置多个静态资源目录，甚至为不同的静态资源目录设置不同的路径前缀。

示例：为不同路径设置静态资源目录

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

const app = express();

// 为 /public 路径提供静态资源
app.use('/public', express.static(path.join(__dirname, 'public')));

// 为 /images 路径提供静态资源
app.use('/images', express.static(path.join(__dirname, 'images')));

// 启动服务器
app.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

在这个示例中：

访问 http://localhost:3000/public 会返回 public 目录中的文件。
访问 http://localhost:3000/images 会返回 images 目录中的文件。

2.3 使用路径重定向

有时你可能希望将静态资源目录中的文件重定向到其他路径或设置路径的别名。Express 提供了这种能力。

示例：路径别名

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

const app = express();

// 将访问 /assets 的请求重定向到 /public 目录
app.use('/assets', express.static(path.join(__dirname, 'public')));

// 启动服务器
app.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

在这个例子中：

访问 http://localhost:3000/assets 实际上会访问 public 目录中的文件。

🔍 3. 缓存控制

静态文件一般不需要频繁修改，因此设置合理的缓存策略能够提高性能，减少不必要的网络请求。你可以通过设置 HTTP 响应头来控制缓存。

Express 中的 express.static 允许你为静态文件配置缓存控制。

3.1 设置缓存控制

你可以通过配置 maxAge 选项来指定静态文件的缓存时间，单位是毫秒。这个选项会向客户端发送 Cache-Control 头部，指示浏览器缓存资源多长时间。

示例：设置缓存时间

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

const app = express();

// 设置静态文件缓存时间为 1 天（86400000 毫秒）
app.use(express.static(path.join(__dirname, 'public'), {
  maxAge: 86400000
}));

// 启动服务器
app.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

在这个示例中：

我们设置了静态文件的缓存时间为 1 天（86400000 毫秒）。浏览器将在这段时间内缓存静态文件，不会每次都请求服务器。

3.2 控制特定文件的缓存

你可以根据文件类型来设置不同的缓存策略。例如，对于图片文件，你可能希望设置更长的缓存时间，而对于 JavaScript 或 CSS 文件，你可能希望缓存时间较短，确保用户获取到最新的版本。

示例：为不同类型的文件设置不同的缓存策略

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

const app = express();

// 为所有静态文件设置默认缓存时间为 1 天
app.use(express.static(path.join(__dirname, 'public'), {
  maxAge: '1d' // 缓存 1 天
}));

// 为图片文件设置更长的缓存时间（1 年）
app.use('/images', express.static(path.join(__dirname, 'images'), {
  maxAge: '1y' // 缓存 1 年
}));

// 启动服务器
app.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});