Question

我将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服务器渲染它时，它完全正常。

Answer 1

您不需要指定节点模块的路径，这样做：

const express = require('express');
const app = express();
const path = require('path');

Answer 2

首先，我建议您在使用节点时不要使用绝对路径。我建议配置你的Windows环境，所以它可以正常使用npm，然后package.json应告诉npm需要哪些模块。

完成配置后，第一行应如下所示：

var express = require('express');

此外，考虑继续使用es6并使用const / let而不是var。但这是另一个话题。

您的问题是浏览器不知道资源文件。

对于express，最好在本地运行并在导航到localhost的浏览器中使用它：PORT。

然后，可以从“/css/foo.css”等相关网址请求资源。

然后，当您的网站部署时，主机名更改时不会丢失。

Answer 3

确保您的html页面中的脚本'src'正确无误。如果你的css在你的样式文件夹中，你必须像这样来源 <link rel="stylesheet" href="/styles/style.css"> 还要确保文件的顺序正确。您将首先想要获取您的js。如果所有其他方法都失败，请尝试使用jq或js cdn。 Google Jquery CDN或您正在使用的任何语言，并将cdn复制并粘贴到<head>中。我不建议定期这样做。如果没有互联网，CDN就无法运作。

使用express.js呈现html，但是html无法获取JS文件

3 个答案: