表达:如何使用sendFile与css一起发送html?

neo*_*icd 16 html css node.js sendfile express

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

app.get('/', function(req, res) {
  res.sendFile(__dirname + "/" + "index.html");
});
Run Code Online (Sandbox Code Playgroud)
<link rel="stylesheet" href="style.css">
Run Code Online (Sandbox Code Playgroud)

我使用上面的node.js代码发送一个html文件.要获取格式化的html文件,我需要发送另一个css文件(style.css).
我的问题是:如何使用sendFile()发送这两个文件(index.html和style.css)并将它们集成在客户端?

Exp*_*lls 36

浏览器应该style.css自己加载,因此您可以将其作为路由提供:

app.get('/style.css', function(req, res) {
  res.sendFile(__dirname + "/" + "style.css");
});
Run Code Online (Sandbox Code Playgroud)

但是,当您添加更多文件时,这会很快变得非常麻烦.Express提供了一种内置的方式来提供静态文件:

https://expressjs.com/en/starter/static-files.html

const express = require("express");
const app = express();
app.use(express.static(__dirname));
Run Code Online (Sandbox Code Playgroud)

请记住,如果index.html与服务器代码位于同一目录中,您还将服务器代码作为静态文件提供,这是不受欢迎的.

相反,你应该将index.html你的css,图像,脚本等移动到一个名为的子目录中public并使用:

app.use(express.static("public"));
Run Code Online (Sandbox Code Playgroud)

如果您这样做,Express将index.html自动提供,您也可以删除app.get("/".

  • 伟大的!顺便说一句,浏览器是否会因为以下代码而加载 style.css ?&lt;link rel="stylesheet" href="style.css"&gt; (2认同)