Node.js Express无法加载CSS和JS文件

Question

Node.js Express无法加载CSS和JS文件

3

我使用Node.js上的Express框架。我加载的HTML文件没有获取到JavaScript和CSS文件。

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
     <h1>Hello, world!</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">        </script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>

这是我在Node.js中的express部分：

app.get('/', function(req, res){

    console.log(req.path);

    fs.readFile('mongo_client/index.html',function (err, data){
        if(!err)
        {
            res.writeHead(200, {'Content-Type': 'text/html','Content-Length':data.length});
            res.write(data);
            res.end();
        }
        else
        {
            res.writeHead(400, {'Content-Type': 'text/html'});
            res.end("index.html not found");
        }
    });
});

唯一的 console.log 只打印了“/”。CSS 和 JS 文件甚至都没有被请求。

编辑：

我使用了静态中间件，但它也不起作用。

app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res){

    fs.readFile('mongo_client/index.html',function (err, data){
        if(!err)
        {
            res.send(data);;
        }
        else
        {
            res.send("index.html not found");
        }
    });
});

因此，我将我的js和css数据放在public文件夹中。每次尝试连接时，我都会下载index.html文件。有人有使用express的简单Web服务器的工作示例吗？我必须使用文件阅读器吗...我认为还有另一种方法可以使用express中间件。我只需要一个支持css和js的简单express Web服务器的示例...我找不到任何基本内容。

- marcel

1

使用Express时，您不需要使用res.writeHead、res.write和res.end。只需使用res.send(data)即可。在err条件下，只需使用console.log(err)打印err以查看是否存在读取文件的问题。 - Mukesh Soni

你是在说它甚至不能从CDN获取jQuery，还是只是本地文件。你是否有静态文件的静态路由？ - adeneo

jQuery正在加载。我没有静态路由。如果我使用res.send(data)，我会下载该网站。 - marcel

然后添加一个静态路径，类似于app.use(express.static(__dirname + "/public"));。 - adeneo

1个回答

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

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

- Matt Pileggi · Accepted Answer

app.get('/') 只会响应根路径的请求，对于其他请求不做处理。你的 CSS 和其他资源都在 /css/bootstrap.min.css，而你的路由无法处理。

但对于 Express，可以使用 static 中间件来处理所有这些问题。详见http://expressjs.com/api.html#middleware

这篇文章还说明了设置方法：http://blog.modulus.io/nodejs-and-express-static-content

更新：一个示例应用程序

Express 能够生成支持静态文件、可选的 CSS 预处理器的示例应用程序。参阅他们的指南：http://expressjs.com/guide.html，但基本步骤是全局安装 express。

npm install -g express

然后使用命令行生成应用程序的框架。

express --css stylus myapp

上面提供了对Stylus的支持。如果您愿意，您也可以指定less。或者生成带有基本css文件支持的文件。

express myapp

然后进入myapp文件夹（或你提供的其他名称），你就可以看到它是如何完成的。