Express(Node.js)中CSS文件无法加载的问题求助

看起来你踩了几个Express静态资源配置和路径解析的常见坑，我来帮你一步步搞定：

核心问题拆解 #

你的CSS加载失败主要是两个原因：

• 相对路径解析偏差：页面路由是/show/:id（比如/show/456），浏览器会把assets/css/style.css这种相对路径解析成/show/assets/css/style.css，但你的静态资源实际在根目录的/assets/下，自然找不到。
• 路由代码语法错误：你的app.get回调函数没闭合，服务器启动后大概率会报错，影响资源加载。

分步修复 #

1. 把CSS路径改成绝对路径 #

修改show.ejs里的link标签，给href加上开头的斜杠，让浏览器从根目录请求资源：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="/assets/css/style.css" media="screen" />
</head>
<body>
    <h1> Value is <%= detail %></h1>
</body>
</html>

2. 简化并修正静态资源配置 #

在app.js里用最稳妥的方式配置静态文件服务，同时修复路由的语法错误：

//required npm
var express = require('express');
var path = require('path');

var app = express();

// set up template engine
app.set('view engine', 'ejs');

// 正确配置静态资源：把public目录设为静态根
app.use(express.static(path.join(__dirname, 'public')));

// 修复路由的语法错误：补上闭合的 });
app.get('/show/:id', function (req, res) {
    res.render('./panel/show', {
        detail: req.params.id ,
    });
});

//port
app.listen(3000);

这个配置会让Express把public目录下的文件映射到根URL，比如/assets/css/style.css会对应public/assets/css/style.css。

可选方案：用<base>标签统一路径 #

如果你不想逐个修改资源路径，可以在show.ejs的<head>里加一行<base href="/">，这样所有相对路径都会自动基于根目录解析：

<head>
    <base href="/">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css" media="screen" />
</head>

验证方法 #

重启服务器后访问http://localhost:3000/show/123，打开浏览器F12的「网络」面板，查看style.css的请求状态：如果是200，说明加载成功了，页面也会应用你写的CSS样式。

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