css - Node - CSS 文件未在一条路径上被拾取但在另一条路径上被拾取

Question

我有一个 html 文件，由第三方库生成，我需要在 Node 服务器的路由上提供服务。

html 文件和相关的 css 文件在名为 public 的文件夹中生成，具有以下结构。

src -|
     | - public -|
     |           | - css -|
     |           |        | - css-file.css
     |           | - index.html
     | - server.js

html文件引用css文件为

<link rel="stylesheet" href="css/css-file.css" />

我无法更改它，因为 index.html 和相关的 css 文件是由第三方库生成的。

在 server.js 文件中，我有以下代码

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

app.get('/path/one',(req, res) => {
   res.set({'Content-Type': 'text/html'});
   res.sendFile(path.join(__dirname, './public/index.html'))
}

app.get('/pathTwo', (req, res) => {
   res.set({'Content-Type': 'text/html'});
   res.sendFile(path.join(__dirname, './public/index.html'))   
}

css 文件在 /pathTwo 上获取，但在 /path/one 上未获取。我不知道为什么。

编辑我从日志中注意到一件事

• 对于 /path/one，node 在 /path/css/css-file.css 位置寻找文件，而不是在 /css/css-file.css

来自 express.static 的 express 文档

该函数通过将 req.url 与提供的根目录相结合来确定要提供的文件。

预先感谢您的帮助

Answer 1

解决方法

为此找到了解决方法。

查看日志和网络调用，对于 css，正在进行以下调用以获取 css 文件

GET /path/css/css-file.css 

此调用失败并显示 404，导致 html 未使用 css。

我在服务器中添加了一条新路由，如下所示

app.get(`path/css/:fileName`, (req, res) => {
   const fileName = req.params.fileName;
   const filePath = path.join(__dirname, `./public/css/${fileName}`);
   res.set({'Content-Type', 'test/css'})
   res.sendFile(filePath);
}

这会从所需路径返回 CSS 文件，并最终由 HTML 文件使用。

这似乎只是一种解决方法，而不是 express.static 中的解决方案。

希望有人能在这里提供解决方案。

提前致谢!