22 配置静态文件目录
在这一章中，我们将学习如何在 Express.js 应用中配置一个静态文件目录。通过正确的配置，我们可以让 Express.js 方便地服务于我们的静态资源，比如 CSS 文件、JavaScript 文件以及图片等。
什么是静态文件？
静态文件是指文件内容不随请求而变化的文件，例如 HTML 页面、样式表、脚本文件、图像等等。在 Express.js 中，我们可以使用内置的中间件 express.static() 来提供静态文件服务。
配置静态文件目录
为了配置静态文件目录，我们需要在 Express 应用中使用 express.static() 中间件。下面是配置静态文件目录的基本步骤：
创建项目目录结构
假设我们的项目目录结构如下：1
2
3
4
5
6
7
8
9
10my-express-app/
├── public/
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ └── script.js
│ └── images/
│ └── logo.png
├── app.js
└── package.json在上面的结构中，
public目录将用于存放所有静态文件。安装所需的依赖
如果还没有安装 Express.js，你可以通过 npm 安装它：1
npm install express
配置 Express 应用
在你的app.js文件中，使用express.static中间件来服务于public目录中的静态文件。代码示例如下：1
2
3
4
5
6
7
8
9
10
11
12
13const express = require('express');
const path = require('path');
const app = express();
// 配置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));
// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});在上面的代码中，我们使用了
path.join(__dirname, 'public')来确保即使在不同操作系统上也能够正确解析路径。测试静态文件服务
添加一些基本的 HTML 来测试静态文件服务。在public目录下创建一个文件index.html：1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<script src="/js/script.js"></script>
<title>Static Files Example</title>
</head>
<body>
<h1>欢迎来到 Static Files Example</h1>
<img src="/images/logo.png" alt="Logo">
</body>
</html>在这个 HTML 文件中，我们引入了 CSS 文件和 JavaScript 文件，并添加了一张图片。
运行应用
启动你的应用：1
node app.js
然后在浏览器中访问
http://localhost:3000，你应该看到你的 HTML 页面和引入的静态资源。
小结
在本章中，我们学习了如何在 Express.js 应用中配置静态文件目录。通过使用 express.static() 中间件，我们能够轻松地向用户提供 CSS、JavaScript、图片等静态资源。接下来，我们将深入探讨如何访问这些静态文件，以及进一步的配置选项。希望你可以在自己的项目中灵活应用这些知识！
22 配置静态文件目录
