EJS模板无法加载CSS文件求助：静态资源404问题排查

layout.ejs无法加载style.css，浏览器网络面板显示请求路径/style/style.css正确，但返回404错误。文件结构如下：

• root/public/style/style.css
• root/views/layout.ejs

layout.ejs中的样式引用代码：

<link rel="stylesheet" href="/style/style.css">

main.js完整代码：

"use strict";

const express = require("express"),
    app = express(),
    router = express.Router(),
    mongoose = require("mongoose"),
    layouts = require("express-ejs-layouts"),
    errorController = require("./controllers/errorController"),
    homeController = require("./controllers/homeController"),
    path = require('path');   


//setting the port and the view engine as .ejs files
app.set("port", process.env.PORT || 3001);
app.set("view engine", "ejs"); 


router.use(express.static(path.join(__dirname, "public")));
router.use(layouts);

router.use(
    express.urlencoded({
        extended: false
        })
    );
router.use(express.json());
  
// using the homecontroller
router.use(homeController.logRequestPaths);
app.get("/", homeController.index);

// Using the error controller
app.use(errorController.ResourceNotFound404);
app.use(errorController.internalError500);

app.use("/", router);

app.listen(app.get("port"), () => {
    console.log(`Server running at http://localhost:${app.get("port")}`)
});

已尝试修改样式路径和Express静态资源配置代码，问题仍未解决。

问题核心是Express中间件的执行顺序错误：

1. 你将静态资源中间件express.static挂载到了router上，但在注册router之前，已经先加载了404错误中间件。Express会按代码顺序执行中间件，当请求静态资源时，会先触发404中间件直接返回错误，根本无法走到router的静态资源处理逻辑。
2. 根路由app.get("/", ...)直接注册在app实例上，未统一到router中，也会导致路由逻辑混乱。

修改步骤：

• 调整中间件顺序，将app.use("/", router)移到错误中间件之前
• 将根路由迁移到router中统一管理
• 可选优化：将静态资源中间件直接挂载到app实例上，更符合Express常规写法

修改后的main.js代码：

"use strict";

const express = require("express"),
    app = express(),
    router = express.Router(),
    mongoose = require("mongoose"),
    layouts = require("express-ejs-layouts"),
    errorController = require("./controllers/errorController"),
    homeController = require("./controllers/homeController"),
    path = require('path');   


//setting the port and the view engine as .ejs files
app.set("port", process.env.PORT || 3001);
app.set("view engine", "ejs"); 

// 直接挂载静态资源到app，无需通过router
app.use(express.static(path.join(__dirname, "public")));
app.use(layouts);

router.use(
    express.urlencoded({
        extended: false
        })
    );
router.use(express.json());
  
// using the homecontroller
router.use(homeController.logRequestPaths);
// 根路由迁移到router中
router.get("/", homeController.index);

// 先注册router，再加载错误中间件
app.use("/", router);

// Using the error controller
app.use(errorController.ResourceNotFound404);
app.use(errorController.internalError500);

app.listen(app.get("port"), () => {
    console.log(`Server running at http://localhost:${app.get("port")}`)
});

修改完成后重启服务器，浏览器请求/style/style.css即可正常返回文件，layout.ejs也能正确加载样式。

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