我有一个简单的 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.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 />
使用绝对路径。这可以通过两种方式完成:
- 使用绝对
href
喜欢http://example.com/myCSS.css
- 使用绝对
href
喜欢/myCSS.css
- 领先/
这两种方法都会导致浏览器从根域开始查找 CSS 文件。也就是说,浏览器现在将在 example.com/myCSS.css
处查找 CSS 文件。 。或者,如果我们将其更改为 <link href="/styles/myCSS.css" />
浏览器会在 example.com/styles/myCSS.css
处查找 CSS 文件。 。
关于css - 用于提供静态文件的中间件不适用于动态路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47936513/