用于提供静态文件的中间件不适用于动态路由-电脑我帮您

我有一个简单的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');
});

回答如下：

这听起来像是一个相对路径问题。这是一个例子。

在您的初始路线设置中，使用/:world，您将拥有像example/earth这样的网址，其中包含<link />标签，如<link href="myCSS.css" />。在这个设置中，<link />标签指向example/myCSS.css。

在第二个路径设置中，使用/:world/:page，你会有一个像example/earth/about这样的网址，其中包含<link />标签，如<link href="myCSS.css" />。在此设置中，<link />标记指向example/earth/myCSS.css。

这是因为<link />标记中文件的路径是相对的。这意味着它相对于当前页面的路径。

要解决此问题，您需要更新<link />以使用绝对路径。这可以通过两种方式完成：

使用像href这样的绝对http://example/myCSS.css
使用绝对href像/myCSS.css - 与领先的/

这两种方法中的任何一种都会导致浏览器从根域开始查找CSS文件。也就是说，浏览器现在将在example/myCSS.css中查找CSS文件。另外，如果我们将其更改为<link href="/styles/myCSS.css" />，浏览器将在example/styles/myCSS.css中查找CSS文件。