子目录下EJS文件无法加载CSS的问题排查与解决

原因分析 #

1. 页面引用路径错误：
   login.ejs位于views/contractor/auth/层级下，如果你的CSS引用用的是相对路径（比如../assets/css/styles.css），这个相对路径会基于当前页面的URL路径解析，最终会请求/contractor/assets/css/styles.css，而你的静态文件实际在public/assets/css/下，自然找不到。而home.ejs在views根目录，相对路径刚好能对应到正确的静态资源路径，所以能正常加载。

2. 静态服务配置冗余（非核心问题，但需优化）：
   你的app.js里重复配置了多次express.static，比如app.use(express.static("public"))和app.use(express.static(__dirname + "/public"))在app.js位于根目录时效果完全一致，多余的配置不仅没用，还可能造成混淆。

修复步骤 #

第一步：简化静态服务配置 #

把app.js里的静态相关配置精简为一行（推荐使用path模块避免跨平台路径问题）：

const path = require('path'); // 先引入path模块
app.set("view engine", "ejs");
// 只保留这一行静态服务配置，public目录下的所有资源都会以根路径/为基准提供访问
app.use(express.static(path.join(__dirname, 'public')));

第二步：统一使用绝对路径引用静态资源 #

在所有ejs文件（包括login.ejs）里，用绝对路径引用CSS文件：

<link rel="stylesheet" href="/assets/css/styles.css">

这个绝对路径/assets/css/styles.css会直接对应到public/assets/css/styles.css，不管当前页面在哪个子目录下，都能正确找到静态资源。

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