node.js - 在示例 express-jade 项目中获取样式表和 js 的 404

Question

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

我相信我给出的路径是正确的。这让我发疯。我知道问题必须如此微小和简单才能值得面对，但我无法找到它。

你能帮帮我吗？

代码位于 Rishavs/ComingSoonPage的 github 上

感谢您的时间和帮助。

~ 里沙夫

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);
});

编辑：注意/publicVSpublic

Answer 2

就像提到的markt。您的 html 不应引用“公共”。

<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 我能够像这样访问公共：

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方法。第一个告诉脚本将被提供的路径是什么（也就是你必须在浏览器中输入什么才能得到它）。第二个是文件在服务器上的物理位置。