NodeJS静态文件夹中的HTML无法加载具有相对路径的资产

Question

我为NodeJS网站使用了一个静态文件夹，但是奇怪的是，在index.html中，我仍然需要包含指向包含文件的文件夹的路径。

将文件夹名称添加到路径可以解决此问题，但只能在提供的初始index.html页面中进行。在随后的任何页面中（单击站点中的超链接后），文件夹名称突然不都可以成为路径的一部分！

文件夹

dist
  └── viewer
   ├── index.html
   ├── test.html
   ├── style.css
   └── game.js

节点

app.use(express.static('dist'))
app.get('/viewer', function (req, res) {
    res.sendFile(__dirname + '/viewer/index.html')
})

INDEX.HTML

即使它们位于同一文件夹中，我也无法加载路径为./的资产

// WORKS
<link rel="stylesheet" href="./viewer/style.css">
// NOT WORKING
<script src="./game.js"></script>

TEST.HTML

如果您单击index.html中指向test.html的链接，则行为突然相反！

// NOT WORKING
<link rel="stylesheet" href="./viewer/style.css">
// WORKS
<script src="./game.js"></script>

如何获得指向节点站点中所有页面上正常工作的资产的链接？

Answer 1

尝试使用确切路径

<script src="/viewer/game.js"></script>

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

您可以检查文件是否在浏览器中正常工作

喜欢开

http://localhost/viewer/style.css

http://localhost/viewer/game.css

---

---

如果您不想使用确切的路径，则必须设置正确的路径， 因为test.html位于viewer文件夹

，因此在test.html中，您需要添加

<script src="./game.js"></script>

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

---

---

在路由中，您正在浏览器http://localhost/viewer中访问index.html

然后正确的来源路径如下

<link rel="stylesheet" href="./viewer/style.css">
<script src="./viewer/game.js"></script>

因为路由将目录更改为/。

如果您以http://localhost/viewer/index.html的身份访问index.html，则正确的路径应为

<link rel="stylesheet" href="./style.css">
<script src="./game.js"></script>

---

---

在您的情况下，您使用来混淆路由器：

app.get('/viewer', function (req, res) {
    res.sendFile(__dirname + '/viewer/index.html')
});

有一个名为index.html的文件，当您输入目录时，大多数服务器都会在该目录中查找index.html。如果可用，它将仅显示index.html文件。

如果静态文件夹中存在目录，则不应添加路由。

---

---

PS：最佳做法是使用源的确切路径。

---

---

希望这会有所帮助