前言
在 Express 中处理静态资源(使用express.static
中间件)
基本用法
首先,需要引入 Express 并创建应用实例,然后使用express.static
中间件来指定静态资源所在的目录。例如,假设静态资源都存储在名为public
的目录下:
const express = require('express');
const app = express();
app.use(express.static('public'));
app.listen(3000, () => {
console.log('Server running on port 3000');
});
这样,当客户端请求http://localhost:3000/index.html
(假设index.html
在public
目录下)时,服务器会自动在public
目录中查找index.html
文件并发送给客户端。如果请求http://localhost:3000/styles/main.css
(假设main.css
在public/styles
目录下),服务器也会正确地找到并发送该文件。
虚拟路径前缀
可以为静态资源设置虚拟路径前缀。例如,想让所有静态资源的 URL 路径都以/static
开头,可以这样设置:
app.use('/static', express.static('public'));
此时,要访问public
目录下的index.html
文件,客户端需要请求http://localhost:3000/static/index.html
。这种方式在需要区分静态资源和动态路由,或者将静态资源部署到特定的路径下时非常有用。
多个静态资源目录
可以指定多个静态资源目录。例如,除了public
目录,还有一个uploads
目录用于存储用户上传的文件,并且也想将其作为静态资源提供服务,可以这样做:
app.use(express.static('public'));
app.use('/uploads', express.static('uploads'));
这样,客户端可以通过http://localhost:3000/
访问public
目录下的静态资源,通过http://localhost:3000/uploads
访问uploads
目录下的静态资源。
例子
有两个静态文件,分别是放到views文件夹的index.html页面和放到public的myStyle.css样式文件
文档结构
index.html的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/public/myStyle.css">
</head>
<body>
<p class="redBackground">This is the index page.</p>
</body>
</html>
引入了myStyle.css
.redBackground {
background-color: red;
}
服务器的配置如下:
const express = require('express');
const app = express();
//设置了public目录为静态资源目录(需要输入public才能访问到public目录下的文件)
app.use('/public',express.static('public'))
//设置views目录为静态资源目录(不需要输入views也可以访问到views目录下的文件)
app.use(express.static('views'))
app.listen(2000,()=>{
console.log('Server is running on port 2000')
})
浏览器输入http://localhost:2000/index.html,可以看到页面
如果我将public的静态文件配置app.use(‘/public’,express.static(‘public’))注释掉,是加载不到css文件的