静态 javascript 未在翡翠中呈现（使用 express/node.js）答案

【问题标题】：static javascript not rendering in jade (with express/node.js)静态 javascript 未在翡翠中呈现（使用 express/node.js）
【发布时间】：2012-03-20 09:59:38
【问题描述】：

希望你一切都好。

我突然无法在翡翠模板中呈现任何外部 javascript！为了弄清楚事情的真相，我将其剥离到最低限度：

节点 0.6.11，Express 2.5.8，玉 0.20.3

app.js

var express = require('express')
, routes = require('./routes');

var app = module.exports = express.createServer();

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

app.configure('development', function(){
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function(){
  app.use(express.errorHandler());
});

app.get('/', function(req, res){
  res.render('index', { title: 'Express' });
});

app.listen(3000);

layout.jade

!!!
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(type='text/javascript', src='/javascripts/script.js')
  body!= body

script.js

alert('hello!');

在我看来，当我运行服务器并加载 http://localhost:3000/ 时，我应该马上得到一个“你好！”消息，但它只是直接运行到正常页面。更重要的是，如果我手动输入

script
  alert('hello!')

进入 layout.jade 模板，我得到了我应该得到的消息。它只是不加载静态脚本。而且我确实检查了“script.js”是否在“/public/javascripts/”中，就像它应该的那样。任何建议都会非常受欢迎！！！

提前致谢

【问题讨论】：

如果你使用 Firebug 或 Chrome 的检查器，你能看到加载 JS 文件的任何错误吗？
@loganfsmyth 感谢您的评论！在萤火虫中列出了地址，但我无法点击进入文档。没有错误...
如果你只是在浏览器中输入网址，你能看到脚本吗？另外，当你说它们被列出时，你的意思是你可以看到脚本标签？您也应该能够在其中看到网络请求。也许看看请求是否有一个成功的数据响应。
你可能已经检查过了，但是每次我遇到这个问题时，它都与缩进有关。确保你有 2 个空格而不是制表符。除此之外，我同意您应该查看写入 HTML 的内容以获取一些线索。

标签： node.js express pug

【解决方案1】：

你需要像这样从控制器传递你的脚本：

app.get('/', function(req, res){
  res.render('index', { title: 'Express', scripts: ['javascripts/script.js']});
});

然后在你脑海中的 layout.jade 中：

- each s in scripts
    script(src=s)

【讨论】：

【解决方案2】：

为什么您的 Jade 脚本标签中有一个正斜杠“/”开头？使用<root_dir>/public/javascripts/script.js 中的脚本，在Jade 中引用它的正确方法是script(src="javascripts/script.js")。至少那是我的安装工作。对于 /public 目录中的 CSS 或图像等其他资产也是如此。

【讨论】：

【解决方案3】：

确保您的 js 文件作为静态资源公开。

在 layout.jade...

!!!5
html
   head
      script(src='js/helper.js')

在 app.js 中...

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

一旦我将“js”文件夹放在“public”文件夹下，helper.js 就会毫无问题地加载。很简单，但我对这一切都很陌生，一开始我并没有明白。

【讨论】：

【解决方案4】：

感谢 Rob（您可以在上面找到他的答案）指出正确的方向。我只是想添加一点参考，让它看起来比任何魔法都更自然。

在明确的文档here 中，它提到如果要提供静态文件（如 css、图像等），则需要使用声明它

app.use(express.static("_dirName"));

我在 html 代码中使用图像时遇到了同样的问题。有了这个，它现在可以正常工作了。

【讨论】：