Question

我试图从节点Js服务器脚本中读取一个html文件，但它没有读取我在html文件中链接的css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My node file</title>
    <link rel = "stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "home">
    <h2>Hello there</h2>
    <p>Iam developing my first node js site</p>

</div>
</body>
</html>

我的CSS

.home{
    background: red;
}

我的节点js文件

    var http = require('http');
var fs = require('fs');
http.createServer(function (req, res) {
  fs.readFile('index.html', function(err, data) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(data);
    res.end();
  });
}).listen(8080

我的期望

enter image description here

得到的内容

enter image description here

热烈欢迎任何帮助

Answer 1

问题在于您使用index.html回复每个请求。这意味着如果Web浏览器发送style.css请求，它仍然会获得html。您可以查看浏览器控制台以验证这一点。要提供不同的文件，您可能需要检查request.url以准确提供客户想要的文件：

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

http.createServer(function (req, res) {
 if(req.url === "/index.html" || req.url === "/"){
  fs.readFile('index.html', function(err, data) {
     res.writeHead(200, {'Content-Type': 'text/html'});
     res.write(data);
     res.end();
   });
 } else if(req.url === "/style.css"){
   fs.readFile('style.css', function(err, data) {
     res.writeHead(200, {'Content-Type': 'text/css'});
     res.write(data);
     res.end();
   });
 }
}).listen(8080);

如果您认为对许多不同的文件感到讨厌，您可以使用允许静态目录服务的库，例如： express

Answer 2

我认为您需要将该css作为服务器端的静态文件提供，例如：

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

在这里你只是说，嘿客户端从现在起我在公共文件夹中的东西的路径可以像这样抓住：

http://localhost:3000/css/style.css

如果你有一个css文件夹，这就是你获得样式的方式，现在在你的客户端只是链接到那个

节点js没有读取我的CSS文件

2 个答案: