css - CSS 文件上的 ExpressJs 404

Question

所以我正在尝试学习如何使用 expressJS 和 nodeJS，但当我启动服务器并加载 html 页面时遇到了无法找到 CSS 文件(404 错误)的问题。 html 页面加载正常，但是当我让服务器加载它时它没有样式。当我在没有服务器的情况下加载页面时，页面会被设置样式。这是我的 express 和 Node 文件代码:

var http = require('http'),
    express = require('express');
    app = express();

app.get('/', function(req,res){
    res.sendFile(__dirname + '/index.html');
});

app.use(express.static('public'));

app.listen(3000);

css 的 html 链接是:

<link href="public/main.css" rel="stylesheet">

文件结构为

• 前端(文件夹)

  • index.html

  • index.js

  • 公共(public)(文件夹)

    • main.css

我做错了什么？我用谷歌搜索并查看了文档，但到目前为止还没有找出问题所在。

Answer 1

您对 static 绑定(bind)的工作方式做出了错误的假设。以下说明:

app.use(express.static('public'));

告诉 express “在 / 上请求的任何没有明确路由绑定(bind)到此应用程序的资源都应该通过文件系统解析；具体来说，应该在 ./public 中查找它们 目录”。

因此，如果有人请求 /cats.git，并且 express 在您的应用中没有看到明确的路由绑定(bind)，它将检查 ./public 相对于其运行位置的目录，尝试查找名为 cats.gif 的文件，如果可以找到则返回它(如果找不到则发送 404)。

因此，您的文件系统中的目录与您站点的用户无关:他们将简单地根据干净的路径解决问题，因此如果您有一个文件 ./public/main.css 你只想作为静态内容，那么你的 CSS 链接应该是:

<link href="main.css" rel="stylesheet">

然后 express 将看到对 /main.css 的请求，它会注意到没有为其定义明确的路由，然后将尝试查找 main.css 在你的静态目录中。它会找到 ./public/main.css，然后简单地将其作为对 /main.css 的响应发回。