爲什麼node.js應用CSS在我的IDE中加載，但不在本地主機上？

我正在使用LightTable製作nodejs應用程序，並且當我在<link href="">標記中指示文件的相對路徑時，css似乎正在加載正常。但是，當我運行node index.js時，服務器啓動並且頁面加載正常，但是出現控制檯錯誤，我自己的404說在指定的路徑中找不到CSS文件。我也試過使用Heroku的Foreman Start，但沒有骰子。下面是HTML：爲什麼node.js應用CSS在我的IDE中加載，但不在本地主機上？

<!DOCTYPE html> 
<html> 
    <head> 
     <title> 
      Home 
     </title> 
     <link href="../../styles/master.css" rel="stylesheet" type="text/css" /> 
    </head> 
...

這裏是我的目錄樹結構：

. 
├── Procfile 
├── README.md 
├── index.js 
├── package.json 
├── resources 
│   └── images 
│    └── tokyo.jpg 
├── styles 
│   └── master.css 
└── views 
    ├── get 
    │   ├── home.html 
    │   └── posts.html 
    └── post 
     └── new.html

編輯：找到問題的答案後，下面的信息變得相關。我已經註釋出了使CSS和背景圖像按需加載的新代碼。

這是我的路由和服務器代碼。我沒有使用Express，故意：

// routes 
    var homeREGEX = new RegExp('^/?$'); 
    var newREGEX = new RegExp('^/posts/new/?$'); 
    var postsREGEX = new RegExp('^/posts/?$'); 
// var cssREGEX = new RegExp('^/styles/master.css/?$');    <--| static resources also 
// var tokyoREGEX = new RegExp('^/resources/images/tokyo.jpg/?$'); <--| need routes. 

    // server 
    var server = http.createServer(function(request, response){ 
     var pathname = url.parse(request.url).pathname; 

     if (homeREGEX.test(pathname)) { 
     renderHome(request, response); 

     } else if (newREGEX.test(pathname)) { 
     renderPostForm(request, response); 
     } else if (postsREGEX.test(pathname)) { 
     addNewPost(request, response); 
    // } else if (cssREGEX.test(pathname)) {   <--| and they need to get 
    // sendCSS(request, response);     <--| served individually as 
    // } else if (tokyoREGEX.test(pathname)) {   <--| they are requested 
    // sendTokyo(request, response); 
     } else { 
     error404(request, response); 
     } 
    });

來源

2014-09-24 kurofune

什麼是你在瀏覽器中看到，當你在看網頁，這是行不通的網址是什麼？ – 2014-09-24 06:39:19

localhost：3000，但是如果我導航到localhost：3000/styles/master.css，我得到一個404找不到，錯誤。 – kurofune 2014-09-24 06:51:57

瀏覽頁面時瀏覽器使用什麼網址？我的猜測是，這並不包含views/get部分，這意味着你不需要鏈接href屬性中的..\..。

此外，請確保您實際上提供這些靜態文件（看起來你不是）。如果您使用快遞（帶的NodeJS）例如，你需要這樣的事：

app.use(express.static('resources')); 
app.use(express.static('style'));

見express.static documentation。

來源

2014-09-24 06:40:19

我嘗試刪除並添加「../」在我能想到的每個組合中。還沒有工作！ – kurofune 2014-09-24 06:46:43

好的，但請給你的網址，否則我們無能爲力。 – 2014-09-24 06:51:02

我把它貼在上面：localhost：3000。在控制檯中，它表示「x-GET localhost：3000/styles/master.css」，並在我導航時確認404未找到錯誤。 – kurofune 2014-09-24 06:57:06

也許你可以嘗試把準確的路徑，而不是../../

<link href="/Procfile/styles/master.css" rel="stylesheet" type="text/css" />

來源

2014-09-24 06:45:09 user3835327

我試過了我能想到的所有版本的路徑，無濟於事... – kurofune 2014-09-24 06:50:43

爲什麼node.js應用CSS在我的IDE中加載，但不在本地主機上？

回答

相關問題