无法获取app.css,main.js,使用Express服务器加载的其他文件

时间:2014-12-29 18:49:13

标签: javascript express server

我有以下代码:

var express = require('express');
var app = express();
var server = require('http').Server(app);

app.get('/', function(req,res){
 res.sendfile(__dirname + '/index.html');
});

server.listen(3000);

但是,只显示我的index.html页面,并且我的其他文件出现GET错误。当我在localhost:3000加载index.html时,我在控制台中遇到错误,试图找到我的main.js和app.css文件。即使我将其他文件作为src包含在html文件中,它们也无法加载。我想这可能是因为我只将单个html文件发送到服务器。我该如何处理这个问题,以便将所有相关文件发送到服务器?

2 个答案:

答案 0 :(得分:7)

使用

res.sendfile(__dirname + '/index.html');

作为对获取请求的响应,不会提供所有静态文件,只有单个index.html文件 - 这意味着您的服务器将找不到您的css和javascript文件(即使您链接到它们)你的HTML)。

您需要使用包含的express静态中间件(express v4中唯一包含的中间件)。

如果静态文件与server.js文件位于同一目录中,则添加

app.use(express.static('.'));

这会提供所有本地静态文件,并使其可以在您的服务器上访问。

我前一段时间写了一篇博文:

https://medium.com/@willsentance/how-to-avoid-main-js-style-css-not-found-or-how-i-learned-to-love-serving-static-files-with-node-2121255da0fd

答案 1 :(得分:3)

您尚未提供指向链接文件的路线。

使用静态中间件:http://expressjs.com/api.html#express.static

来自文档:

以下是在Express应用程序中使用express.static中间件的一些示例。

为" public"提供应用的静态内容应用程序目录中的目录。

// GET /style.css etc
app.use(express.static(__dirname + '/public'));

将中间件安装在" / static"仅在其请求路径以" / static"。

作为前缀时才提供静态内容
// GET /static/style.css etc.
app.use('/static', express.static(__dirname + '/public'));

通过在静态中间件之后加载记录器中间件来禁用静态内容请求的记录。

app.use(express.static(__dirname + '/public'));
app.use(logger());

提供来自多个目录的静态文件,但优先考虑" ./ public"超过其他人。

app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/files'));
app.use(express.static(__dirname + '/uploads'));