4

我有一个带有少量容器的基本 HTML index.html,我将bootstrapfont 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 获得的不同脚本,但似乎无法正确处理。谢谢!

4

2 回答 2

7

通过以这种方式初始化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">
于 2013-08-07T18:16:15.497 回答
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')));
于 2013-08-07T18:17:42.743 回答