NodeJS + Hapi + CSS 麻烦答案

【问题标题】：NodeJS + Hapi + CSS TroubleNodeJS + Hapi + CSS 麻烦
【发布时间】：2015-03-10 22:45:53
【问题描述】：

我正在使用 hapi 在 Node js 中创建一个小型虚拟主机这是为了练习，因为我对 node 不是很熟悉，但我正在尽我所能学习。

我当前的问题是，我正在尝试从包含目录中获取一个 css 文件。使用 Hapi 我的 app.js 看起来有点像这样：

var Path = require("path");
var Hapi = require('hapi');
var HandleBars = require('handlebars');
var server = new Hapi.Server();

server.views({
    engines: {
        html: HandleBars
    },
    path: './views'
});

server.connection({
    port: 5000,
    host: "localhost"
});

server.route({
    method: 'GET',
    path: '/',
    handler: function(request, reply) {
        reply.view('index.html');
    }
});

server.route({
    method: '*',
    path: '/{p*}',
    handler: function(request, reply) {
        reply.view('404.html').code(404);
    }
});

server.route({
    method: 'GET',
    path: '/images/{param*}',
    handler: {
        directory: {
            path: 'public/images'
        }
    }
});

server.route({
    method: 'GET',
    path: '/{file}.css',
    handler: function (request, reply) {
        reply.file("/includes/css/"+request.params.file+".css");
    }
});

server.start(function(err) {
    console.log('Server running at:', server.info.uri);
});

我的 index.html 看起来像这样：

<html>

<head>
    <title>Home</title>
</head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="/main.css" rel="stylesheet">

<body>

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="" alt="First slide">
                <div class="container">
                    <div class="carousel-caption">
                        <h1>Welcome to Beta</h1>
                        <p>Welcome to our site beta, as you will notice a lot of functionality is still being developed. Please be patient!</p>
                        <p><a class="btn btn-lg btn-primary" href="#" role="button">Read Latest Log</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="/images/NewBG.png" alt="Second slide">
                <div class="container">
                    <div class="carousel-caption">
                        <h1>OOHHH the SPOOKS</h1>
                        <p>Watch out for the Spooks!</p>
                        <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="/images/buttonindie.png" alt="Third slide">
                <div class="container">
                    <div class="carousel-caption">
                        <h1>Proud Supporter of Indie</h1>
                        <p>Welcome to our Indie Game page for State of Grey! a new ariel view pixel horror game based in the VX Ace Game engine. Click our About tab and learn about the team!</p>
                        <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
    <!-- /.carousel -->
    <div class="container">
        <!-- Example row of columns -->
        <div class="row">
            <div class="col-md-4">
                <h2>{{title1}}</h2>
                <p>{{content}}</p>
                <p><a class="btn btn-default" href="{{detailsLink1}}" role="button">View details &raquo;</a>
                </p>
            </div>


     <div class="col-md-4">
            <h2>{{title2}}</h2>
            <p>{{content}}</p>
            <p><a class="btn btn-default" href="{{detailsLink2}}" role="button">View details &raquo;</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2>{{title3}}</h2>
            <p>{{content}}</p>
            <p><a class="btn btn-default" href="{{detailsLink3}}" role="button">View details &raquo;</a>
            </p>
        </div>
    </div>
    <!--#include virtual="/web/includes/footer.html"-->


</div>
<!-- /.container -->

当我在本地通过 heroku 运行我的主机时，当我通过控制台记录路径时，我似乎找不到 main.css，当它被 / 调用时，它似乎完美地指向了我需要它去的地方。但是它仍然显示为 404 not found。谁能给我指出一个可靠的方向？提前谢谢！

【问题讨论】：

“main.css”不匹配顶级/路径？
假设是每当/ 调用file.css 时，它应该发回带有css 文件的路径，但也许我没有做对。
好吧，我不是该框架的专家，但看起来它停在与路径匹配的第一条路线上。我会尝试确定那个普通的“/”是否匹配任何东西。出于这个原因，像这样的路由机制将路径拆分为“/app/...”和“/statics/...”是很常见的。
是的。我将它发送到错误的位置，我忘记在我的路径中指定视图，这是 include 所在的位置，现在已修复。感谢对我俯瞰的帮助。

标签： javascript css node.js hapijs

【解决方案1】：

您提供路线的顺序很重要。您必须从最具体到最通用。正如 @Pointy 所建议的，您获取 /main.css 的请求被 404 路由隐藏了

{path: '/{p*}',
handler: function(request, reply) {
    reply.view('404.html').code(404);

您可以在这里找到更多关于在api documentation 中提供静态文件的详细信息

【讨论】：