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

Question

我正在尝试使用一些本地 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...");
});

这是我的文件结构：文件结构

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

有任何想法吗？

Answer 1

感谢克里斯·肖特的评论

我换了

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

至

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

它工作得很好。

非常感谢。

Answer 2

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

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

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

请参阅以下内容了解更多信息

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

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