Question

我有一个带有少量容器的基本HTML index.html，我将 bootstrap 和 font awesome 文件夹添加到文件的<head>部分。如：

<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">

然后，我编写了一个web.js脚本来首先初始化服务器，然后以这种方式添加包含静态文件的文件夹：

var express = require('express');
var app = express();
var fs = require('fs');

var buf = fs.readFileSync("index.html");
app.use(express.logger());

app.get('/', function(request, response) {
  response.send(buf.toString());
});

app.configure(function(){
    app.use(express.static(__dirname + '/assets'));
    app.use(express.static(__dirname + '/bootstrap'));
    app.use(express.static(__dirname + '/font-awesome'));
});

var port = process.env.PORT || 8080;
app.listen(port, function() {
  console.log("Listening on " + port);
});

然而，当我转到http://localhost:8080时，我从GET命令中获取404错误，试图获取bootstrap.css等等。有任何帮助吗？我尝试了从stackoverflow获得的不同脚本，但我似乎无法做到正确。谢谢！

Answer 1

通过以这种方式初始化express.static，您告诉它从根目录查找任何请求的文件。

如果要删除路径：

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">

可能会找到您的静态资产。但是，您要求头痛，因为任何重复的文件名都会导致第一次返回。

相反，您可能希望将所有静态资源放在单个目录下，或者为app.use语句添加不同的路径参数，以便更好地组织事情。

文件布局：

public
 |-- bootstrap
 |-- font-awesome

对应的app.use语句（并从你的html路径中删除..）：

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

或多个静态中间件（并从您的html路径中删除..）：

app.use('/bootstrap', express.static(path.join(__dirname, '/bootstrap')));
app.use('/font-awesome', express.static(path.join(__dirname, '/font-awesome')));

上述任一项的HTML更改：

<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">

Answer 2

尝试使用html：

<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">

在节点应用中：

app.use('/assets', express.static(path.join(__dirname, '/assets')));
app.use('/bootstrap', express.static(path.join(__dirname, '/bootstrap')));
app.use('/font-awesome', express.static(path.join(__dirname, '/font-awesome')));

node.js脚本无法获取静态文件

2 个答案: