Hapi.js - 无法在 SPA 中提供静态文件

Question

我刚刚尝试制作 SPA，但我无法解析 index.html 依赖项（例如包括关联的 css、js 文件）。所有 js 和 css 文件都无法加载到浏览器中，并在开发控制台中显示 404 错误。

/root
|
|__public
|      └── spa
|          ├── controllers
|          ├── css
|          ├── html
|          ├── js-self
|          ├── js-vendor
|          └── services
|_____________ index.html

路由声明

var assets = function(){
    return {
        method: 'GET',
        path: '/{param*}',
        handler: {
            directory :{
                path : 'public',
                index: false
            }
        }
    }
}

所有路线的顺序

  info: ================Registered routes=============
info: Route:    GET /employee
info: Route:    POST    /employee
info: Route:    PUT /employee
info: Route:    DELETE  /employee
info: Route:    POST    /signin
info: Route:    POST    /signup
info: Route:    POST    /signout
info: Route:    GET /{param*}
info: Route:    GET /
info: =============================================

Html 文件

<!DOCTYPE html>
<!-- saved from url=(0058)http://getbootstrap.com/examples/starter-template/#contact -->
<html lang="en" ng-app="ibs">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Starter Template for Bootstrap</title>
    <script src="./public/spa/js-vendor/jquery-2.1.3.min.js"></script>
    <script src="./public/spa/js-vendor/angular-1.3.14.js"></script>
    <script src="./public/spa/js-vendor/angular-route.js"></script>
    <script src="./public/spa/app.js"></script>
    <link href="./public/spa/css/signin.css" rel="stylesheet">
    <link href="./public/spa/css/bootstrap.min.css" rel="stylesheet">
    <link href="./public/spa/css/starter-template.css" rel="stylesheet">

    <style type="text/css" media="screen">
        .appbkg {
          background: #303F9F
        }
    </style>
  </head>

  <body class="appbkg">
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://getbootstrap.com/examples/starter-template/#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="http://getbootstrap.com/examples/starter-template/#">Home</a></li>
            <li><a href="http://getbootstrap.com/examples/starter-template/#about">About</a></li>
            <li><a href="./Starter Template for Bootstrap_files/Starter Template for Bootstrap.html">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container" ng-view>
    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./public/spa/js-vendor/bootstrap.js"></script>
</body></html>

Answer 1

我用这个小编辑让它工作：

var assets = function(){
return {
    method: 'GET',
    path: '/{param*}',
    handler: {
        directory :{
            path : './',
            index: false
        }
    }
}
}

./ 路径实际上是相对于你在运行 node app.js.

时所在的位置

因此，请确保您在运行时位于根文件夹中。由于 node ../app.js 不起作用 !!

因为这不是很干净，避免那样使用路径并坚持使用 path.join(__dirname, 'path/to/folder') 和 __dirname 作为参考。这是一个更清洁的解决方案

var assets = function(){
return {
    method: 'GET',
    path: '/{param*}',
    handler: {
        directory :{
            path : path.join(__dirname, '../..'),
            index: false
        }
    }
}
}

备注from node's docs

__dirname 是：

The name of the directory that the currently executing script resides in.

Hapi.js - 无法在 SPA 中提供静态文件

Hapi.js - Unable to serve static file in SPA

static-files

node.js

hapijs

备注from node's docs