主路由中的子路由无法获取ExpressJS中的静态文件

Question

我有这个目录结构

在users.js中，我有/login和/register的路由。
因此，我可以通过localhost:3000/user/login访问它，但我的包含CSS的静态文件没有加载。
如何为所有子路由提供静态文件服务？

- Vishnudev Krishnadas

---

使用内置的中间件函数express.static，并指向存储静态文件的目录。您可以参考链接。例如：app.use(express.static('public'))。 - Ziyad Ahmad

我已经使用过那个。 - Vishnudev Krishnadas

你的静态文件存储在哪里？ - Ziyad Ahmad

@ZiyadAhmad 在 public/ 文件夹中。 - Vishnudev Krishnadas

尝试使用 app.use(express.static( __dirname + '/../public))。 - Ziyad Ahmad

非常感谢@ZiyadAhmad，这个方法很有效。请将其发布为答案，我会投票解决。 - Vishnudev Krishnadas

Answer 1

您的页面位于另一个层级，因此您需要添加另外几个点。

之前：<link rel="stylesheet" href="stylesheets/style.css">

之后：<link rel="stylesheet" href="../stylesheets/style.css">

- Ezra Chang

---

我使用以下代码来提供静态文件服务：app.use(express.static(path.join(__dirname, 'public'))); - Vishnudev Krishnadas

@Vishnudev 我的意思是，当你在视图中使用这些资源（html/pug/ejs）时，你需要更改路径。我已经编辑了我的答案，使其更加清晰明了。 - Ezra Chang

这里的问题是我使用了Express，只有一个主页面加载CSS。所以当我按照你说的做时，问题只解决了一半，我的/users/login（多级路由）得到了CSS，但那些具有/home（单级路由）的没有。 - Vishnudev Krishnadas

你使用的是哪个视图引擎？ - Ezra Chang

Express JS 是我的视图引擎。 - Vishnudev Krishnadas

Answer 2

在文件夹的相对路径后面添加一个斜杠，然后在__dirname后面跟随。使用路径来规范化文件夹路径中的 . 或 .. 。

var express = require('express');
var app = express();
var path = require('path');
app.use(express.static(path.join(__dirname + '/../public')));

请参考以下链接获取更多示例：https://millermedeiros.github.io/mdoc/examples/node_api/doc/path.html#path.normalize

- Ziyad Ahmad

Answer 3

翻译: 编写：（例如）（将href或src从相对路径更改为绝对路径）通过在路径开头添加/

<link rel="stylesheet" href="/stylesheets/style.css">

之前：

<link rel="stylesheet" href="stylesheets/style.css"> 

or

<link rel="stylesheet" href="./stylesheets/style.css">

- Sadeen Alaa