注意:结果证明我的问题不在于中间件express.static(),而在于app.use()和app.get()之间的区别。这个问题的答案解释得非常好(比express API文档好得多!):
Difference between app.use and app.get in express.js
我理解app.use('/')和app.get('/')的区别在于后者只为该端点提供HTTP GET请求的服务,而前者则为该端点提供所有HTTP请求的服务。
我还了解到,express.static中间件将静态页面从目录路径提供给一个端点。
我不理解的是为什么这样做:
app.get('/', express.static(__dirname + '/public')
仅提供第一个请求的页面,并不提供所请求页面中引用的ref=或src=链接/脚本页面。例如,以下是两个morgan跟踪响应简单的index.html页面,该页面具有指向文件'style.css'的css链接
1)使用app.use('/')的服务器请求跟踪
Server listening on 0.0.0.0:8080
GET / 200 6.258 ms - 444
GET /style.css 304 2.842 ms - -
2) 使用 app.get('/') 的服务器请求跟踪
Server listening on 0.0.0.0:8080
GET / 304 5.131 ms - -
GET /style.css 404 2.990 ms - 22
404???
即使浏览器发送了 GET 请求到'/',但 app.get('/') 无法提供 css,而 app.use('/') 却成功了。我错过了哪个细节?是 app.get('/') 还是 express.static?
提前感谢, PT
以下是简单的代码:
app.js:
var morgan = require('morgan'),
express = require('express'),
app = express(),
server = require('http').Server(app);
app.use(morgan('dev'));
// Uncomment .get or .use, but not both
// this only serves index.html, not style.css when I nav to localhost:8080/
//app.get('/', express.static(__dirname + '/pub'));
// this serves both pages when I nav to localhost:8080/
app.use('/', express.static(__dirname + '/pub'));
server.listen(8080);
这里是HTML的内容...
index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</html>
路径:
/app.js
/pub/index.html
/pub/style.css
app.use(express.static(__dirname + '/public'));
。但是,您必须非常小心关于事情的顺序。这通常是将静态内容放入单独路径的原因,以便中间件和.get()
处理程序更容易通过路径指定进行分离(例如从URL路径/lib
服务器所有静态内容之类的)。 - jfriend00app.use('/', express.static(__dirname + '/public'));
我有一个 HTML 页面/public/index.html
,该页面链接到/public/style.css
。这两个页面都可以使用所示的处理程序正常提供服务。但是我想:“为什么我要使用 .use(),它支持所有 HTTP 方法(GET、POST、HEAD 等),当我只应处理 GET 时。我只需要将 .use 更换为 .get,一切都应该正常工作。”但是,事实并非如此,style.css 返回 404 错误。为什么呢?谢谢。 - PeterT