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>

测试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">

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

像开

如果您不想使用确切的路径，则必须设置正确的路径，因为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：最佳做法是使用源的确切路径。

希望这可以帮助