CSS未在nodejs Web应用程序中呈现[重复]答案

【问题标题】：css is not rendering in nodejs web app [duplicate]CSS未在nodejs Web应用程序中呈现[重复]
【发布时间】：2018-09-19 18:51:54
【问题描述】：

我已经组装了一个小应用程序并使用 html、css 和 javaScript。现在我想在 nodejs 服务器上运行它。我已经为服务器创建了一个单独的文件，以使用以下代码开始运行。

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

function onRequest(request, response) {
response.writeHead(200, {'Content-Type': 'text/html'});
fs.readFile('./index.html', null, function(error, data) {
    if (error) {
        response.writeHead(404);
        response.write('File not found');
    } else {
        response.write(data);
    }
    response.end();
  });

}

http.createServer(onRequest).listen(3000, function(){
console.log("The server has started");
});

现在 html 正在呈现，但 CSS 没有呈现。另外，链接到 html 的 JavaScript 不起作用。我确实看到了这个Nodejs static file。但这似乎没有意义。任何帮助将不胜感激。

【问题讨论】：

你试过Harp.js吗？认为问题可能出在'Content-Type': 'text/html'，因为您只处理html文件（不是css，不是js）。我认为该应用程序还应该包含其他文件类型的单独逻辑。
在我看来，css 和 js 文件的 index.html 是对请求的唯一响应是索引文件。
任何请求的帮助：打开浏览器控制台以查看您的 css 和 js 文件的 404 错误。当这样的事情不起作用时，首先要打开控制台（又名 DevTools）。

标签： javascript css node.js server

【解决方案1】：

你（有点）必须使用静态文件。因为在您的示例中，即使请求了 CSS 或 JS 文件，您也始终发送 index.html 文件。

这里有一个 express 的例子（几乎等于 http）

var express = require('express');
var path = require('path');

var app = express();

app.use(express.static(path.join(__dirname, RELATIVE_CLIENT_WEBSITE_DIR_WHERE_INDEX_FILE_IS)));

app.listen(PORT);

【讨论】：

也可以在onRequest Handler中检查浏览器请求了哪个文件，然后将请求的文件作为响应数据发送。

【解决方案2】：

没有快递，我写了小模块：

 var fs = require('fs');
module.exports = {
    getFile: function(url) {
        var text = '404';
        try {
            url = url.split('?')[0];
            if (url === '/') {
                url = '/index.html';
            }
            text = fs.readFileSync('./public' + url);
            if (url === '/index.html') {
                text = text.toString().replace(/version=/g, "version=" + Date.now());
            }
            return text;
        } catch (e) {
            return text + ' ' + e;

        }
    }
};

-- 是 route.js，在这个文件中，我得到包含 css、js 和其他文件夹的“public”文件夹。 index.js：

var http = require("http");
var route = require('./route');

var html; 

     function onRequest(request, response) {
          if (request.method === 'GET') {
                response.writeHead(200);
                response.write(route.getFile(request.url));
                response.end('');
            } 
        }
        http.createServer(onRequest).listen(8888);
        console.log("Server has started.");

'index.html' 示例：

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css?version=">
    <title>test table</title>
</head>

<body>

    <div contenteditable="true">
        Example
    </div>
    <script src="js/table_creator.js?version="></script>
    <script src="js/table_controller.js?version="></script>
    <script src="js/table_size.js?version="></script>
    <script src="js/table_core.js?version="></script>
    <script src="js/index.js?version="></script>
</body>

</html>

publick 文件夹：

服务器文件系统：

【讨论】：

模块会在 server.js 文件中吗？
我把我的index.html、js和css放到public文件夹里了？
我重写了答案。您可以在github.com/piotrazsko/tableContoller 中查看此代码
谢谢，稍后看看。