脚本和 css 文件未使用 jade + node js 加载

Question

我正在学习均值堆栈开发。我正在使用一些示例进行锻炼。我试图在 jade 文件中加载我的 css 文件和 javascript 文件。文件出现在控制台 --> 源中。但是所有 css 文件都加载了空数据，所有 js 文件都加载了 html 数据。

我的 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....');

如何在这种情况下正确加载文件？

Answer 1

您的应用程序中的任何内容都没有处理对客户端资源的请求，这意味着它们由您的 "catch-all" 处理程序 (app.get('*', ...)) 处理，returns HTML（这解释了为什么您看到 HTML 被返回为 jQuery，例如）。

您想在您的应用中使用 static file handler 来处理这些请求：

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

__dirname 参数指向保存客户端资源文件的目录，因此您可能需要更改它。

此外，请确保将此行添加到上方你的全能处理程序，否则请求仍将由它而不是静态文件处理程序处理。

脚本和 css 文件未使用 jade + node js 加载

Scripts and css files not loading with jade + node js

node.js

express

pug