Node.js 不加载 CSS 和图像[重复]

Question

情况

我绝对是 Node.js 的初学者，我主要只是尝试在我的网站中实现一个 npm 包，但我正在努力运行我现有的 HTML 和 CSS（不太具体）。

我没有使用快递。

我的代码

这是我当前的index.js：

const http = require("http");
const fs = require("fs");

const PORT = 3030;

fs.readFile('website/index.html', function (error, html) {
    if (error) {
        console.error("Error reading HTML file:", error);
        return;
    }

    http.createServer(function (request, response) {
        response.writeHeader(200, {"Content-Type": "text/html"});
        response.write(html);
        response.end();
    }).listen(PORT);

    console.log(`Server is running on port ${PORT}`);
});

问题

当我进入页面时，它只是纯 HTML，没有图像和任何类型的 css。问题不在于 LESS，我也尝试过只使用 CSS。

潜在的解决方案

我认为问题是我必须告诉服务器加载图像和样式，就像我对 HTML 所做的那样，但我不知道如何做，因为我不使用 Express，所以我找不到任何问题或教程.

感谢任何帮助，我愿意提供更多需要的信息。

Answer 1

欢迎来到 Stack Overflow！

查看您的代码，您只看到一个纯 HTML 文件是完全有道理的 - 浏览器可能正在尝试加载样式和图像，但您的后端被硬编码为仅返回您的 HTML 文件。

如果您查看代码的这一部分：

    http.createServer(function (request, response) {
        response.writeHeader(200, {"Content-Type": "text/html"});
        response.write(html);
        response.end();
    }).listen(PORT);

此代码创建一个 HTML 服务器，仅对每个请求响应

html

变量的内容，并将

Content-Type

标头设置为

html

。由于

html

变量仅包含

website/index.html

的内容，因此每当访问任何页面时都会发送这些内容！

有几种方法可以满足所有需求。

简单的 Node.js 解决方案（Naive）

如果您想继续使用纯 Node.js 而不使用任何外部库，您可以访问

request.url

以根据请求的路径返回不同的文件。例如，当加载

http://localhost:3030/file.txt

时，

request.url

的值将为

"/file.txt"

。

一个简单的解决方案是使用 switch 语句，如下所示：

switch (request.url) {
    case "/": {
        response.writeHeader(200, {"Content-Type": "text/html"});
        fs.createReadStream("website/index.html").pipe(response);
        response.end();
        break;
    }
    case "/file.txt": {
        // serve file.txt
        // etc.
    }
}

注意：什么是

createReadStream()

和

.pipe()

？

该行基本上只是将文件的内容输入到 HTTP 响应中。

createReadStream()

创建了称为 stream 的东西，这有点像听起来的那样——从某个地方流向其他地方的字节流。在流上调用

.pipe(thing)

可以让您选择流流入的内容。在本例中，我们将数据从文件流式传输到 HTTP 响应中。

您可以在 这篇可爱的 FreeCodeCamp 文章中了解有关流的更多信息。

但是，当您有大量不同的文件和图像时，这种情况很快就会崩溃。每次想要添加另一个文件时都必须硬编码另一个分支，这很糟糕。最好只提供文件系统中的所有内容......

普通 Node.js 解决方案（文件系统）

我强烈鼓励你自己解决这个问题，但我会提供一些建议。

要获取文件路径，您可以简单地连接

"website" + request.url

。如果

request.url

是

"/file.txt"

，这将是

"website/file.txt"

，为您提供正确的文件路径！

但是，请注意以

/

结尾的路径通常会提供名为

index.html

的文件。您可以使用 if 情况来处理此问题，如下所示：

let path = "website" + request.url;
if (path.endsWith("/")) {
    path += "index.html";
}
// now serve the file at path!

如果路径以

index.html

结尾，则将

/

附加到路径的末尾。

最后，使用此方法时要非常小心！ 只需使用

..

，您就可以轻松地让互联网上的任何人访问您计算机上的任何文件。您可能从终端知道

..

表示“上一个目录”，这在 Node.js 中读取文件时也适用！您应该确保从路径中删除

/..

的所有实例，也许像这样：

path = path.replaceAll("/..", "");

无聊的“安装库”解决方案

如果您不关心学习普通 Node.js，或者您想尝试一些更复杂的代码，Express 是一个非常流行的 HTTP 服务器库。

在 Express 中，您只需几行即可实现静态服务器（这也是

..

安全的）：

const express = require("express");
const app = express();

app.use(express.static("website"));

app.listen(3030, () => {
    console.log("Server is running on port 3000");
});

（确保运行命令

npm install express

来安装库。）

如果您想沿着这条路线走下去，我建议您探索 Express 文档以了解更多信息！