使用Node.js和Express.js时不同路由下CSS加载异常问题咨询

问题根源 #

你的问题核心是静态资源路径解析错误，再加上代码里没正确配置静态文件服务：

• 你当前用的app.use(express.json('public'))是用来解析JSON请求体的，完全不是托管静态文件的正确写法。
• 当访问/PKorn/zealtech时，浏览器会把HTML里的相对路径CSS（比如css/style.css）自动解析成/PKorn/zealtech/css/style.css，但你的CSS实际存在public目录下，自然找不到对应的文件。

解决方案 #

步骤1：修正静态文件托管配置

把错误的express.json替换成express.static，让Express能正确识别并返回public目录下的静态资源：

const express = require('express');
const path = require('path');

const app = express();
// 正确配置静态文件托管，指定public目录为静态资源根目录
app.use(express.static(path.join(__dirname, 'public')));

app.get('/PKorn/zealtech', function(req, res) {
    res.sendFile(path.join(__dirname, '/public/Ko.html'));
});

app.listen(4402);

步骤2：修正HTML里的资源引用路径

确保HTML中引用CSS、JS、图片等静态资源时，使用根路径开头的绝对路径，比如：

<!-- 错误的相对路径 -->
<link rel="stylesheet" href="css/style.css">

<!-- 正确的根路径写法 -->
<link rel="stylesheet" href="/css/style.css">

这样不管访问哪个层级的路由，浏览器都会从网站根目录（对应Express的public目录）去请求静态资源，不会出现路径解析错误。

内容的提问来源于stack exchange，提问作者KoKo