Question

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

app.get('/', function(req, res) {
    res.sendFile('main.html', { root : __dirname})
});

app.listen(9000, function(){
console.log('Listening on port 9000');
});

这个当前的代码块工作正常。 Express是必需的，并分配给变量app。

然后使用res.sendFile作为app.get方法的一部分发送HTML文件（来自同一目录）。

在HTML文件中，我在同一目录中引用了一个css文件，但没有发生任何事情。

<link rel='stylesheet' type='text/css' href='mainstyle.css'>

如何将CSS文件发送到浏览器以供使用？ res.sendFile不起作用。

感谢。

Answer 1

您需要定义静态文件目录。创建一个名为public的文件夹，然后包含以下行：

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

但是，当您包含css文件时，请不要在文件路径中包含public。所有静态文件都可以进入该文件夹。或者，更好的是，为样式，图像，字体等创建子文件夹。

您可以在此处详细了解：https://expressjs.com/en/starter/static-files.html

我认为您遇到的问题是您尝试使用Express从头开始创建Web应用程序，而不需要任何周围的功能。导航到URL时，您的应用会发送文件。它不会侦听特定的文件请求并对其进行响应，它不会处理丢失的文件，服务器错误等。

你可以从头开始做所有这些但实际上Express已经创建了一个应用程序生成器，它可以为你创建一个骨架应用程序，包括Web服务器，公共文件夹，路由等。它叫做Express Generator，你可以找到它在这里：https://expressjs.com/en/starter/generator.html

这是MVC应用程序的出色起点。您获得了其他节点模块的package.json文件，一个名为Jade的模板引擎（虽然我更喜欢Hogan）用于动态内容，一旦它创建了您的应用程序，您可以通过输入＆＃34; npm start＆来启动它。＃34;在控制台窗口中。

Answer 2

试试这个

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

app.get('/', function(req, res) {
    if(req.url == "/" || req.url == "/main.html"){
res.sendFile('/main.html', { root : __dirname})
}else if(req.url == "/mainstyle.css"){
res.sendFile('mainstyle.css', { root : __dirname})
}
});

app.listen(9000, function(){
console.log('Listening on port 9000');
});

Answer 3

我现在知道出了什么问题。

从我开始的实例开始，我正在尝试不同的代码。浏览器比基于我的服务器提供的错误代码创建了缓存，所以无论我改变了什么，浏览器都会在它的缓存中加载，在这种情况下是错误的代码。

对于在输入正确代码时可能遇到类似问题的每个人，请清除缓存历史记录或使用隐身/私人浏览器进行开发。

如何在使用Express发送的HTML文件中使用CSS和JS文件？

3 个答案: