2015-08-16 77 views
0

我正在學習平均堆棧開發。我正在用一些例子來解決問題。我試圖加載我的css文件和JavaScript文件在jade文件。文件出現在控制檯 - >來源中。但所有的CSS文件加載與空數據和所有的JS文件加載HTML數據。 enter image description here enter image description here enter image description here腳本和css文件未加載jade + node js

我有我的server.js這樣

var express = require("express"); 
var stylus = require("stylus"); 
var logger = require("morgan"); 
var bodyParser = require("body-parser"); 

var env = process.env.NODE_ENV = process.env.NODE_ENV || 'development'; 

var app = express(); 
function compile(str,path) { 
    return stylus(str).set('filename', path); 
} 
app.set('views', __dirname + '/server/views'); 
app.set('view_engine', 'jade'); 
app.use(logger('dev')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ 
    extended: false 
})); 
app.use(stylus.middleware({ 
    src: __dirname + '/public', 
    compile:compile 
})); 
//defining routes 
app.get('*', function (req,res) { 
    res.render('index.jade'); 
}); 

var port = 3030; 
app.listen(port); 
console.log('starting listening....'); 

如何在這種情況下正確加載的文件嗎?

+0

你缺少[靜態文件處理程序(http://expressjs.com/starter/static-files.html)。 – robertklep

+0

是的你是對的。請將此作爲答案提交。我會接受它。 – Mihir

回答

1

客戶端資源的請求沒有被應用程序中的任何內容處理,這意味着它們會被您的「全部捕獲」處理程序(app.get('*', ...))處理,該處理程序返回HTML(這解釋了爲什麼您會看到HTML被返回對於jQuery,例如)。

你想用一個static file handler在您的應用程序處理這些請求:

app.use(express.static(__dirname)); 

__dirname參數指向包含您的客戶端資源文件的目錄,所以你可能需要改變這一點。

此外,請確保您添加此行以上您的捕獲所有處理程序,否則請求仍將由該處理,而不是靜態文件處理程序。