如何使用Express.js包括JavaScript和CSS文件

Question

我在一个名为page.js中运行的简单节点服务器，就像我要设置的系统的测试一样。在该文件中，我有以下内容：

var express = require('express');
var app = express();
app.get('/', function(req, res) {
    res.sendFile('/Users/JohnFarkerson/Documents/SublimeFolder/index.html');
});
app.get('/*', function(req, res) {
    res.send("404 –– Page not found");
});
var server = app.listen(8080, function () {
    var host = server.address().address
    var port = server.address().port
});

，索引文件的路径会导致同一目录（sublimeFolder）保存在同一目录中。在该目录中，该目录也是我的JavaScript和CSS文件。在index.html中，我有以下行：

<script language="javascript" type="text/javascript" src="myScript.js"></script>
<link rel="stylesheet" type="text/css" href="myStyleSheet.css">

我尝试将这些路径在index.html中更改为计算机上的完整路径，但这并不能解决我的问题。当我在Finder中找到index.html文件并双击时，它将在Chrome中打开file:///Users/JohnFarkerson/Documents/SublimeFolder/index.html，看起来很完美。但是，当我以节点运行服务器，然后转到http：//localhost：8080/时，该页面将加载一个非常简单的版本，而没有任何我的JavaScript或CSS。我在这里做错了什么？

编辑：

现在有效。index.html看起来像：

var express = require('express');
var app = express();
app.use('/js', express.static(__dirname + '/js'));
app.use('/css', express.static(__dirname + '/css'));
app.get('/', function(req, res) {
    res.sendFile('/Users/JohnFarkerson/Documents/SublimeFolder/index.html');
});
app.get('/*', function(req, res) {
    res.send("404 –– Page not found");
});
var server = app.listen(8080, function () {
    var host = server.address().address
    var port = server.address().port
});

Answer 1

js文件夹中的javascript文件，然后在app.js（main node.js file）中复制此代码：

app.use("/js", express.static(__dirname + '/js'));

Answer 2

如果在Chrome中打开file:///Users/JohnFarkerson/Documents/SublimeFolder/index.html，则该协议是文件协议。但是，如果您打开http://localhost:8080/，则是HTTP协议。Express创建HTTP服务器。.html .css和.js文件是HTTP服务器的静态文件。

也许您的目录看起来像这样：

SublimeFolder
|--- index.html
|--- myScript.js
|--- myStyleSheet.css

在文件协议中，您在磁盘中使用绝对路径，根路径为 /，因此可以正常工作。

但是在HTTP协议中，root路径是HTTP Server root，它可能会在您的代码中定义，例如：

app.use(express.static(path.join(__dirname, 'public')));

HTTP服务器根是your_project_path/public，您应该将JS和CSS文件放在your_project_path/public目录中，然后使用root路径链接主题。例如，公共目录结构是：

your_project_path/public
|--- myScript.js
|--- myStyleSheet.css

和script标签是<script src="/myScript.js"></script>。

您可以使用Express Application Generator创建一个快递项目并检查项目结构，然后您可以理解。