css - 使用 Node.js 和 Express 时，路由参数导致 CSS 无法加载

Question

我正在使用 Node.js、Express 和 EJS 模板引擎构建一个简单的网站，但在将外部 CSS 文件加载到具有路由参数的路由上时遇到问题。我的代码如下所示:

const express = require("express");
const app = express();
var AWS = require('aws-sdk');
var uuid = require('uuid');
var request = require('request');
var Amplify = require('aws-amplify');
const { info } = require("console");

app.use(express.static("public"));
app.set("view engine", "ejs");

app.get("/Test1/", function(req, res){
res.render("Test1.ejs");
});

app.get("/Test2/:route", function(req, res){
res.render("Test2.ejs")
});

Test1.ejs 和 Test2.ejs 彼此完全相同，一个是从另一个复制粘贴的。

我可以看到 CSS 文件在 Test1 上正确加载，但在 Test2 Express 上发送的是 Test2.ejs 的 HTML，而不是实际的 CSS 文件。这无需重新加载或更改任何内容。如果 CSS 没有在我的任何路线上正确加载，我会不会那么困惑，因为这表明我使用 Express 的方式存在一些问题，但我无法弄清楚它如何在我的所有路线上正常工作其他路由，并且每当使用路由参数时都会失败。我也尝试过实际使用路由参数，例如

app.get("/Test2/:route", function(req, res){
const routeParam = req.params.route;
res.render("Test2.ejs", {
    routeParam: routeParam
});

});`

我还在页面中显示了routeParam，以确保其正常工作，而且确实如此，只是页面仍然获取页面的 HTML 来代替正确的 CSS 文件，导致其格式不佳。

如果有任何帮助，我将不胜感激，谢谢

Answer 1

感谢您研究这个 CoderFF，您帮助我弄清楚了如何让它工作。看起来问题是我的 css 文件直接位于 public 文件夹内，而不是位于其中的子目录中。 html 必须是这样的:

<link rel="stylesheet" type="text/css" href="/css/customStyle.css" />

它必须在 href 标签中包含前导“/”。我不知道以前在没有路由参数的路由上没有它是如何工作的，但确实如此。这似乎同样适用于公共(public)文件夹中/images/文件夹中的图像。