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

Question

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

4

我有一个基本的HTML index.html文件，其中包含几个容器，并且我在文件的<head>部分添加了bootstrap和font awesome文件夹。

<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 命令尝试获取 bootstrap.css 等文件时会出现404错误。有什么帮助吗？我尝试了从stackoverflow获得的不同脚本，但似乎不能解决问题。谢谢！

- lllllll

2个回答

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">

在 Node 应用中：

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')));

- Ilya Zaytsev

非常感谢！那也完美地解决了问题，我错过了use()函数的第一个参数。太好了！ - lllllll

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dc5 · Accepted Answer

通过这种方式初始化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">