CSS 代碼未顯示在我的 node.js 服務器上

Question

我試圖在我的 node.js 服務器中使用 CSS 文件，但它從未出現在網頁上。 我在 Visual Studio Code 2019 上執行此操作。

'use strict';
var http = require("http");
var express = require("express");
var app = express();
var path = require("path");
var fs = require("fs");
var port = process.env.PORT || 1337;

http.createServer(function (req, res) {
    res.writeHead(200, { "Content-Type": "text/html" });
    fs.readFile("index.html", function (error, data) {
        if (error) {
            res.writeHead(404)
            res.write("Error: File Not Found")
        }
        else {
            app.use(express.static(path.join(__dirname, "/public")));
            res.write(data)
        }
        res.end();
    })
}).listen(port);

在我的 HTML 文件中，我做了：

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

該網頁只顯示我的 HTML，但它假裝我的 CSS 代碼不存在，所以它只是一堆純文本。 我對 node.js 還比較陌生，所以我可能只是缺少一些簡單的東西。

目錄：

• 公共（文件夾）
  • 主.css
• 索引.html
• 服務器.js

Answer 1

通常使用express時，不需要自己直接使用http模塊。 app.use()調用不應放置在為服務器收到的每個 HTTP 請求調用的回調 function 中，它們應放置在服務器啟動時運行一次的某個位置，例如在模塊的頂層。

如果您將index.html文件移動到您的public中，您的server.js源應該像這樣簡單：

var express = require("express");
var app = express();
var path = require("path");
var port = process.env.PORT || 1337;

app.use(express.static(path.join(__dirname, "/public")));

app.listen(port);

如果您只是想完全運行 static 文件服務器，您可以做一些更簡單的事情。 全局安裝serve並在您要從中提供文件的目錄上運行它：

npm i -g server
npx serve public -p 1337