提供靜態文件的中間件不適用於動態路由

Question

我有一個簡單的Node / Express服務器，當路由為“ /：world”時工作正常。 正確找到CSS文件。

但是，當我將路由更改為“ /：world /：page”時，找不到CSS文件。

這是為什么？ 聽起來很簡單，但我有點新，有解決方案嗎？

var express = require('express');
var bodyParser = require('body-parser');
var path = require('path');
var request = require('request-promise');
const port = process.env.PORT || 3000;

var app = express();

app.use(bodyParser.json());
app.use(express.static(__dirname + '/views'));

app.set('view engine', 'ejs');

app.get('/:world/:page', async (req, res) => {
 var world = req.params.world;
 var page = req.params.page;

 var worldInfo = await getWorldInfo(world);
 if (!worldInfo.world.world_information.players_online) {
    res.render('error.ejs');
 }else{

     var playersList = await getPlayersList(worldInfo, page);

     res.render('index.ejs', {
         playersList: playersList,
         world:world
     });
  }  


});

app.listen(port, () => {
console.log('watcher running');
});

Answer 1

聽起來像是相對路徑問題。 這是一個例子。

在初始路由設置中，使用/:world ，您將擁有一個類似於example.com/earth的URL，並帶有一個<link />標記（如<link href="myCSS.css" /> 。 在此設置中， <link />標記指向example.com/myCSS.css 。

在第二個路由設置中，使用/:world/:page ，您將擁有一個類似於example.com/earth/about的URL，並帶有一個<link />標記，例如<link href="myCSS.css" /> 。 在此設置中， <link />標記指向example.com/earth/myCSS.css 。

這是因為<link />標記中文件的路徑是相對的。 這意味着它相對於當前頁面的路徑。

要解決此問題，您需要更新<link />以使用絕對路徑。 這可以通過兩種方式完成：

1. 使用絕對的href例如http://example.com/myCSS.css
2. 使用絕對href像/myCSS.css -與領先/

這兩種方法都會導致瀏覽器從根域開始查找CSS文件。 也就是說，瀏覽器現在將在example.com/myCSS.css查找CSS文件。 或者，如果我們將其更改為<link href="/styles/myCSS.css" /> ，瀏覽器將在example.com/styles/myCSS.css查找CSS文件。