在样例express-jade项目中，样式表和js得到404

Question

我使用默认的express库在nodejs中创建了一个简单的静态页面。然而，当我运行它时，nodejs无法拾取公共文件，并在它们上抛出404。

我相信我给出的路径是正确的。这快把我逼疯了。我知道问题必须是那么小而简单，才值得正视，但我就是找不到。

你能帮我一下吗?

代码在github上Rishavs/ComingSoonPage

谢谢你的时间和帮助。

~ Rishav

Answer 1

在app.js中，更早地挂载静态文件，如下所示:

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.static(path.join(__dirname, '/public')));
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
});

编辑:注意在/public VS public

Answer 2

就像市场提到的那样。你的html不应该引用"public"。

<link href="../../styles/site.css" rel="stylesheet" />

与

<link href="../../public/styles/site.css" rel="stylesheet" />

Answer 3

在我的情况下，是必须指定子目录，以及主要的"公共"静态目录，例如:

app.use(express.static(path.join(__dirname, 'public')));
app.use('/public/uploads', express.static(path.join(__dirname, '/public/uploads')));

我还发现，将"public"静态目录声明为"/public"还是"public"(带斜杠或不带斜杠)没有区别。

然而，如果我错过了子目录的前导斜杠，它确实会有所不同，即这给了我404:

app.use('public/uploads', express.static(path.join(__dirname, 'public/uploads')));

但这工作正常:

app.use('/public/uploads', express.static(path.join(__dirname, '/public/uploads')));

当然还有确保在目录上正确设置权限的老生常谈!

Answer 4

我使用的是express 2.5.8，我可以像这样访问public:

app.use(express.static(__dirname + '/public'));

然后我注意到，当我在我的布局中有这样的东西:

<link rel="stylesheet" type="text/css" href="style.css">

它并没有像我期望的那样为style.css服务，它期望我做一些像

这样的事情

<link rel="stylesheet" type="text/css" href="../stylesheets/style.css">

在我的app.js文件中添加了以下内容:

  app.use(express.static(__dirname + '/public/stylesheets'));
  app.use(express.static(__dirname + '/public/javascripts'));

一切看起来都像这样:

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'handlebars');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
  app.use(express.static(__dirname + '/public/stylesheets'));
  app.use(express.static(__dirname + '/public/javascripts'));
});

Answer 5

express.static方法不递归地包含子文件夹。您的脚本和样式分别位于public/javascripts和public/stylesheets下。您必须让express知道这些文件夹包含应该直接提供服务的静态文件，如下所示:

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
  app.use('public/javascripts', express.static(path.join(__dirname, 'public/javascripts')));
  app.use('public/stylesheets', express.static(path.join(__dirname, 'public/stylesheets')));
});

最后两行是重要的。注意，有两个参数传递给app.use方法。第一个参数告诉脚本将被提供的路径是什么(也就是您必须在浏览器中输入什么才能得到它)。第二个是文件在服务器上的物理位置。