我正在将 express.js 用于 HTML 文件，该文件进一步调用了一堆 JS 文件。服务器似乎正常工作，但是浏览器未获取在 HTML 中配置的 JS 和 CSS 文件。
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 服务器呈现它时，它工作得非常好。
最佳答案
你不需要为 Node 模块指定路径， 只需这样做:
const express = require('express');
const app = express();
const path = require('path');
关于html - 使用 express.js 渲染 html，但 html 无法获取 JS 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44034361/