在 Express.js 中使用 res.sendFile() 渲染 HTML 文件答案

【问题标题】：Rendering HTML file with res.sendFile() in Express.js在 Express.js 中使用 res.sendFile() 渲染 HTML 文件
【发布时间】：2020-11-03 04:00:51
【问题描述】：

我正在尝试使用一些本地 CSS 文件、本地 JS 文件和两个远程文件作为链接来呈现我的 HTML 文件

但我得到的只是浏览器中的纯 HTML

这是我的 HTML 文件 (index.html) 的顶部：

<script src="src/drawflow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="src/index.css" />
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>

这是我的服务器代码（app.js）：

"use strict";
const express = require("express");
const path = require("path");

const app = express();

app.use(express.static(__dirname + "/src"));

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname + "/index.html"));
});

app.listen(process.env.port || 4000, () => {
  console.log("listening to port 4000...");
});

这是我的文件结构： file structure

index.html 文件在浏览器中打开时工作正常，但无法从服务器正确获取。

有什么想法吗？

【问题讨论】：

在您的 html 文件中，您正尝试从 src/index.css 访问您的 index.css。但是，在您的 app.js 中，您将 index.css 放在根目录下。所以你的 href 需要是 href="index.css" 如果你希望它可以从 src/index.css 访问，那么你需要将你的 express static 更新为 app.use('/src', express .static(path.join(__dirname + '/src'));

标签： javascript html express static-files

【解决方案1】：

如果我理解正确的话。您的 HTML 文件的资产未正确获取，因此当您通过浏览器访问时，您的 HTML 显示为裸露。有了这种理解，您的资产未正确加载的原因是您的 app.js 的设置方式。

目前您正尝试在您的标题中访问href="src/index.css"，但是您的所有资产都将从您的网站根目录中找到。 Expressjs 将所有 app.use 语句作为中间件处理，默认情况下附加到您网站的根目录。如果您想从“src”访问它，那么您需要像这样设置您的 express.static 有点不同。

app.use("/src", express.static(path.join(__dirname, "/src"));

https://expressjs.com/en/guide/using-middleware.html

【讨论】：

【解决方案2】：

感谢Chris Short的评论

我换了

app.use(express.static(__dirname + "/src"));

到

app.use('/src', express.static(path.join(__dirname + '/src')));

而且效果很好。

非常感谢。

【讨论】：