Handlebars / Node / Express无法加载文件

时间:2017-01-12 15:23:58

标签: javascript node.js express handlebars.js

所以我正在为基本的CRUD操作开发Node / Express webapp,而且我很难在项目中实现Handlebars。

当我尝试使用把手时,我的.hbs(以前的.html)页面中的所有样式表都没有加载。

这是文件树:

enter image description here

这是错误: enter image description here

以下是来自

的脚本导入语句的示例

index.hbs

<!-- Bootstrap -->
    <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

最后这里是server.js文件

var express     = require('express'),
    bodyParser  = require('body-parser'),
    path        = require('path'),
    mysql       = require('mysql'),
    dbconfig    = require('./config/database'),
    exphbs  = require('express-handlebars');

var connection = mysql.createConnection(dbconfig.connection)
connection.query('USE ' + dbconfig.database);

var app = express();



//Body Parser Middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

//Set static path
//app.use(express.static(path.join(__dirname, 'public')));
//app.use(express.static(__dirname + '/public'));
//app.set('views', __dirname + '/views');
//app.use('/views', express.static(path.join(__dirname, '/views')));


app.engine('hbs', exphbs({defaultLayout: false}));
app.set('view engine', 'hbs');

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

//app.use('/views/vendors', express.static(path.join(__dirname, '/views/vendors')));
//app.use(express.static(__dirname + '/public/vendors'));


app.get('/', function(req, res) {
    res.render('index');
    connection.query("SELECT * FROM Student", function(err, rows){
        console.log(rows);
    });


});

app.listen(80, function() {
    console.log('we are live on 80');
});

我尝试使用我在SO上找到的其他东西的各种静态路径,但是无法使其中任何一个工作。

任何帮助将不胜感激!!

谢谢!

2 个答案:

答案 0 :(得分:2)

通过在app.get上添加以下行来解决我的问题('/'=

app.use("/vendors",express.static(__dirname + "/vendors"));
app.use("/build",express.static(__dirname + "/build"));
app.use("/images",express.static(__dirname + "/images"));


app.get('/', function(req, res) {

答案 1 :(得分:0)

我认为问题出在车把配置上是可能的,请看一下这样的配置:

app.engine('.hbs',exphbs({
  defaultLayout:'layouts',
  layoutsDir:path.join(app.get('views'),'layouts'),
  partialsDir:path.join(app.get('views'),'partials'),
  extname:'.hbs',
  helpers: helpers
}));
app.set('view engine','hbs');

也许在你的身上会是:

app.engine('hbs', exphbs({defaultLayout: false, extname:'.hbs',}));

如果您使用app.set(express.static(__dirname + '/public'));

尝试将你的样式放在公共文件夹中,例如bootstrap文件夹,然后你要做的就是用这种方式调用它:

<link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">