Node.js Hapi.js-无法在SPA中提供静态文件
我刚刚尝试做一个SPA,但我无法解析index.html依赖项(比如包括相关的css、js文件)。所有的js和css文件都无法加载到浏览器中,并在开发控制台中显示Node.js Hapi.js-无法在SPA中提供静态文件,node.js,static-files,hapijs,Node.js,Static Files,Hapijs,我刚刚尝试做一个SPA,但我无法解析index.html依赖项(比如包括相关的css、js文件)。所有的js和css文件都无法加载到浏览器中,并在开发控制台中显示404错误 /root | |__public | └── spa | ├── controllers | ├── css | ├── html | ├── js-self | ├── js-vendor | └── s
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>
启动模板
.appbkg{
背景:#303F9F
}
切换导航
我通过这个小编辑使它工作:
var assets = function(){
return {
method: 'GET',
path: '/{param*}',
handler: {
directory :{
path : './',
index: false
}
}
}
}
/
路径实际上是相对于运行节点app.js时的位置
因此,在运行它时,请确保您位于根文件夹中。As节点../app.js
不起作用
由于这不是很干净,避免使用路径,并坚持使用path.join(\uu dirname,'path/to/folder')
,以\uu dirname作为参考。
这里有一个更干净的解决方案
var assets = function(){
return {
method: 'GET',
path: '/{param*}',
handler: {
directory :{
path : path.join(__dirname, '../..'),
index: false
}
}
}
}
注
\uu dirname
是:
当前正在执行的脚本所在的目录的名称
hapi的主文件在哪里?就在根目录下。你能添加一个可复制的例子吗?在没有看到其余代码的情况下,很难判断出问题所在。请访问该链接并访问该项目。您将在src下找到routes文件夹。Routes文件夹中有文件“web_route.js”。此文件包含web应用程序的路由。您将在该文件中找到提到的函数。Routes文件夹中的main.js文件充当管理器,它接收Routes文件夹下每个文件中的所有路由。这个主文件被送入server.route()。