22 配置静态文件目录
在这一章中,我们将学习如何在 Express.js 应用中配置一个静态文件目录。通过正确的配置,我们可以让 Express.js 方便地服务于我们的静态资源,比如 CSS 文件、JavaScript 文件以及图片等。
什么是静态文件?
静态文件是指文件内容不随请求而变化的文件,例如 HTML 页面、样式表、脚本文件、图像等等。在 Express.js 中,我们可以使用内置的中间件 express.static()
来提供静态文件服务。
配置静态文件目录
为了配置静态文件目录,我们需要在 Express 应用中使用 express.static()
中间件。下面是配置静态文件目录的基本步骤:
-
创建项目目录结构
假设我们的项目目录结构如下:my-express-app/ ├── public/ │ ├── css/ │ │ └── style.css │ ├── js/ │ │ └── script.js │ └── images/ │ └── logo.png ├── app.js └── package.json
在上面的结构中,
public
目录将用于存放所有静态文件。 -
安装所需的依赖
如果还没有安装 Express.js,你可以通过 npm 安装它:npm install express
-
配置 Express 应用
在你的app.js
文件中,使用express.static
中间件来服务于public
目录中的静态文件。代码示例如下:const 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
:<!DOCTYPE html> <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 文件,并添加了一张图片。
-
运行应用
启动你的应用:node app.js
然后在浏览器中访问
http://localhost:3000
,你应该看到你的 HTML 页面和引入的静态资源。
小结
在本章中,我们学习了如何在 Express.js 应用中配置静态文件目录。通过使用 express.static()
中间件,我们能够轻松地向用户提供 CSS、JavaScript、图片等静态资源。接下来,我们将深入探讨如何访问这些静态文件,以及进一步的配置选项。希望你可以在自己的项目中灵活应用这些知识!