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

Posted 2023-03-25

【中文标题】在示例 express-jade 项目中获取样式表和 js 的 404

【英文标题】：Getting 404 for stylesheets and js on sample express-jade project

【发布时间】：2012-12-28 09:23:26

【问题描述】：

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

我相信我给出的路径是正确的。这让我发疯。我知道这个问题必须如此微小和简单，才能值得大张旗鼓，但我找不到它。

你能帮帮我吗？

代码在github上 Rishavs/ComingSoonPage

感谢您的时间和帮助。

~里沙夫

【参考方案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

【讨论】：

谢谢。这实际上是我做到的。 app.use(express.static(path.join(__dirname, 'public')));我发现了错误。需要声明静态文件夹。还是要谢谢你的帮助。非常感谢。

@RishavSharan 不客气！您不需要手动安装每个子目录。只要它们在/public 之下，它就应该可以工作。

【参考方案2】：

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

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

对比

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

【参考方案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')));

当然还有确保在目录上正确设置权限的老栗子！

【参考方案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'));
);

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

【讨论】：

谢谢。我不知道。

这是不正确的。我从公共子文件夹中访问文件没有问题。问题可能是您在客户端的 URL 中包含了“public/”，这是不必要的。