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

【问题标题】：Route paramters cause CSS not to load while using Node.js and Express使用 Node.js 和 Express 时，路由参数导致 CSS 无法加载
【发布时间】：2020-11-21 11:35:57
【问题描述】：

我正在使用 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 文件，导致其格式不正确。

感谢您的帮助，谢谢

【问题讨论】：

标签： css node.js express

【解决方案1】：

我无法真正重现这一点。我正在做的是：

将我的 CSS 放在 public/css/all.css 中。文件只包含一行：html {background-color: #aaaaaa} 所以我可以知道它已加载
将两个模板放入views/Test1.ejs和views/Test2.ejs中，并放入相同的内容：<html><head><link rel="stylesheet" type="text/css" href="/css/all.css"/></head><body></body></html>

而且效果很好。

我想您已经在 public/ 文件夹中创建了一个文件夹 Test2，您在其中放置了 CSS。在这种情况下，您的 CSS 路径是 /Test2/some.css 匹配您的第二条路线，而不是获取 CSS 文件，而是从路线中获取 HTML。

在这种情况下，移动 CSS 文件会有所帮助。

【讨论】：

感谢您的调查，但我仍然遇到此问题。 Test1.ejs 和 Test2.ejs 已经从同一个 CSS 文件（“public”文件夹中的 customStyle.css）中提取。我也在一个新项目中重新创建了这个问题。我不知道出了什么问题，test1.ejs 和 test2.ejs 中的 css 行看起来像
我已将代码推送到 GitHub。试试看：github.com/CoderFF/express_css_help。不要忘记运行npm install

【解决方案2】：

感谢您研究此 CoderFF，您帮助我弄清楚了如何使其工作。看起来问题是我的 css 文件直接在公用文件夹中，而不是在其中的子目录中。 html 必须是这样的：

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

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

【讨论】：