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

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 已经创建了一个应用程序生成器，它为你创建了一个框架应用程序，包括网络服务器、公共(public)文件夹、路由等。它被称为 Express Generator，你可以在这里找到它:https://expressjs.com/en/starter/generator.html

对于 MVC 应用程序来说，这是一个绝妙的起点。您可以获得用于其他 Node 模块的 package.json 文件，用于动态内容的名为 Jade(尽管我更喜欢 Hogan)的模板引擎，一旦它创建了您的应用程序，您就可以通过在控制台窗口中键入“npm start”来启动它。