CSS 文件上的 ExpressJs 404

Question

所以我正在尝试学习如何使用 expressJS 和 nodeJS，并且在启动服务器并加载 html 页面时遇到了无法找到 CSS 文件的问题（404 错误）。 html 页面加载正常，但是当我让服务器加载它时它没有样式。当我在没有服务器的情况下加载页面时，页面是样式化的。这是我的快递和节点文件代码：

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

  • 公共（文件夹）

    • main.css

我做错了什么？我已经用谷歌搜索并查看了文档，但到目前为止还没有发现问题。

Answer 1

您对static 绑定的工作方式做出了错误的假设。以下指令：

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

告诉 express “在 / 上请求的任何资源，如果没有明确路由到此应用程序，则应通过文件系统解析；具体而言，应在 ./public 目录中查找它们”。

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

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

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

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

Answer 2

试试这个代码

app.use(express.static(__dirname + '/public'));

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