CSS 在本地显示，但不在 dockerized 服务器上

Question

我一直在使用我在网上找到的模板处理带有 HTML 和 CSS 的网页，当我在本地查看它时一切都很好，但是当我查看它安装在服务器上时，CSS 不显示。 It looks like this

When it should look like this

我尝试像 post 那样更正 css 的来源

这就是我的 HTML 索引的样子

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">
    <!-- Google web font "Open Sans" -->
    <link rel="stylesheet" href="/font-awesome-4.5.0/css/font-awesome.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="/text/css" href="/slick/slick.css" />
    <link rel="stylesheet" type="/text/css" href="/slick/slick-theme.css" />
    <link rel="stylesheet" href="/css/tooplate-style.css">

这就是我使用 JS 的方式

    <!-- load JS files -->
    <script type="/text/javascript" src="/js/jquery-1.11.3.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <!-- https://popper.js.org/ -->
    <script src="/js/bootstrap.min.js"></script>
    <!-- https://getbootstrap.com/ -->
    <script type="/text/javascript" src="/slick/slick.min.js"></script>
    <!-- Slick Carousel -->

由于某种原因，当我在本地进行编辑时它确实可以工作，但是一旦安装到服务器上它就无法正确显示

编辑： 这就是我处理节点 app.js 的方式

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

const logger = log4js.getLogger();
logger.level = 'debug';

  //http =>
  //cliente =>(request, response) servidor
http.createServer((request, response)=>{

  if(request.url){
    const file = request.url == '/' ? './WWW/index.html' : `./WWW${request.url}`;
    fs.readFile(file, (err, data)=> {

      if (err){
        response.writeHead(404, {"Content-Type": "text/html"});
        logger.warn(`NOT FOUND ${request.method} ${request.url}`);
        response.write("NOT FOUND");
      }else{
        logger.info(`OK ${request.method} ${request.url}`)
        // Encabezado de la respuesta http
        // parametro 1) Estatus del protocolo http
        // 2) Tipo de contenido (Content Type) => text/html text/plain text/json
        if (file.split('.').pop() == 'png') {
          response.writeHead(200, {"Content-Type": "image/png"});
        }else if (file.split('.').pop() == 'jpg') {
          response.writeHead(200, {"Content-Type": "image/jpg"});
        }else if (file.split('.').pop() == 'pdf') {
          response.writeHead(200, {"Content-Type": "application/pdf"});
        }else {
          response.writeHead(200, {"Content-Type": "text/html; charset=utf-8"});
        }
        // Contenido del cuerpo de la respuesta

        response.write(data);
      }
      response.end();

    });
  }
}).listen(4000);

编辑 2：已解决 好的。问题出在节点 app.js 中 我需要添加一个 if 让它像这样识别 css：

        if (file.split('.').pop() == 'png') {
          response.writeHead(200, {"Content-Type": "image/png"});
        }else if (file.split('.').pop() == 'jpg') {
          response.writeHead(200, {"Content-Type": "image/jpg"});
        }else if (file.split('.').pop() == 'pdf') {
          response.writeHead(200, {"Content-Type": "application/pdf"});
          
        }
        
        else if (file.split('.').pop() == 'css') {
          response.writeHead(200, {"Content-Type": "text/css;"});
          
        }
        
        else {
          response.writeHead(200, {"Content-Type": "text/html; charset=utf-8"});
        }

现在它可以正常工作了

Answer 1

而不是这个

/slick/slick.min.js

使用这个

./slick/slick.min.js

因为 url 和 slick 应该在根目录中

Answer 2

好的。问题出在节点 app.js 中，我需要添加一个 if 以使其能够像这样识别 css：

    if (file.split('.').pop() == 'png') {
      response.writeHead(200, {"Content-Type": "image/png"});
    }else if (file.split('.').pop() == 'jpg') {
      response.writeHead(200, {"Content-Type": "image/jpg"});
    }else if (file.split('.').pop() == 'pdf') {
      response.writeHead(200, {"Content-Type": "application/pdf"});
      
    }
    
    else if (file.split('.').pop() == 'css') {
      response.writeHead(200, {"Content-Type": "text/css;"});
      
    }
    
    else {
      response.writeHead(200, {"Content-Type": "text/html; charset=utf-8"});
    }

现在它可以正常工作了