Question

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

我目前的问题是，我正在尝试从include目录中获取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 -->

当我在本地运行我的主机时，我无法在/调用时找到main.css，当我在控制台上记录它看起来完全指向我的路径时需要它去。但是它仍然显示为404未找到。有人能指出我的方向吗？提前谢谢！

Answer 1

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

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

您可以在此处找到有关在api documentation

中提供静态文件的更多详细信息

NodeJS + Hapi + CSS麻烦

1 个答案: