0
express.jsをHTMLファイルに使用しており、さらにJSファイルの束が呼び出されています。サーバーは動作しているようですが、HTML内で設定されたJSファイルとCSSファイルはブラウザによって取得されません。express.jsを使用してHTMLをレンダリングしますが、htmlはJSファイルを取得できません
var express = require('C:/Program Files/nodejs/node_modules/express/lib/express')
var app = express()
var path = require('C:/Program Files/nodejs/node_modules/path/path')
app.use(express.static(__dirname + '/lib'));
app.use(express.static(__dirname + '/js'));
app.use(express.static(__dirname + '/css'));
app.use(express.static(__dirname + '/img'));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(3000, function() {
console.log('Example app listening on port 3000!')
})
私のhtmlファイルは次のとおりです。
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="./css/source-sans-pro.js"></script>
<link href="css/ratchet.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<script id="home-tpl" type="text/x-handlebars-template">
<header class="bar-title"><h1 class="title">Employee Directory</h1> </header>
<div class="bar-standard bar-header-secondary"><input class='search-key' type="text" style="height:31px;"/></div>
<div class="content"><ul class='list'></ul></div>
</script>
<script id="employee-li-tpl" type="text/x-handlebars-template">
{{#.}}
<li>
<a href="#employees/{{this.id}}" class="tappable">
<img src='img/{{firstName}}_{{lastName}}.jpg'/>
<p>{{this.firstName}} {{this.lastName}}</p>
<p>{{this.title}}</p>
<span class="chevron"></span><span class="count">{{reports}} </span>
</a>
</li>
{{/.}}
</script>
<script id="employee-tpl" type="text/x-handlebars-template">
<header class="bar-title"><a class="button-prev" href="#">Back</a><h1 class="title">Details</h1></header>
<div class='content'>
<div class="details">
<img src='img/{{firstName}}_{{lastName}}.jpg'/>
<h1>{{firstName}} {{lastName}}</h1>
<h2>{{title}}</h2>
<h2>{{city}}</h2>
</div>
<ul class="list inset" style="clear:both;">
{{#if managerId}}
<li><a href="#employees/{{managerId}}" class="tappable"> <p>View Manager</p><p>{{managerName}}</p><div class="action-icon icon-manager"/></a></li>
{{/if}}
{{#if reports}}
<li><a href="#employees/{{id}}/reports" class="tappable"> <p>View Direct Reports</p><p>{{reports}}</p><div class="action-icon icon-reports"/></a></li>
{{/if}}
<li><a href= "spark_widget.html?email={{email}}" target="_blank"><img src="/pix/byron_bay_225x169.jpg" ></a></li>
<li><a href="spark_widget.html?email={{email}}&call=1" target="_blank"><img src="/pix/byron_bay_225x169.jpg" </a></li>
<li><a href="message:{{cellPhone}}" class="tappable"> <p>Message</p><p>{{cellPhone}}</p><div class="action-icon icon-sms"/> </a></li>
<li><a href="mailto:{{email}}" class="tappable"><p>Email</p> <p>{{email}}</p><div class="action-icon icon-mail"/></a></li>
<li><a href="sms:{{cellPhone}}" class="tappable"><p>Map</p> <p>{{city}}</p><div class="action-icon icon-location"/></a></li>
</ul>
</div>
</script>
<script id="reports-tpl" type="text/x-handlebars-template">
<header class="bar-title"><a class="button-prev" href="#">Back</a><h1 class="title">Direct Reports</h1></header>
<div class='content'>
<div class="details">
<img src='img/{{firstName}}_{{lastName}}.jpg'/>
<h1>{{firstName}} {{lastName}}</h1>
<h2>{{title}}</h2>
<h2>{{city}}</h2>
</div>
<ul class="list"></ul>
</div>
</script>
<script src="./phonegap.js"></script>
<script src="./lib/fastclick.js"></script>
<script src="./lib/zepto.min.js"></script>
<script src="./lib/handlebars.js"></script>
<script src="./js/storage/memory-store.js"></script>
<script src="./js/HomeView.js"></script>
<script src="./js/EmployeeView.js"></script>
<script src="./js/ReportsView.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
私は、IISサーバーを使用して、これをレンダリングするとき、それは完全に正常に動作します。あなたは だけでこれを行う、ノードモジュールのパスを指定する必要はありません
ブラウザは空白の画面をレンダリングします。ただし、ソースを表示すると、index.htmlが表示されます。しかし、それは他のものを取り出すことはありません。 –