Express项目CSS文件真实存在但访问报404错误，如何定位解决？

错误原因 #

1. 静态资源目录拼接路径缺失分隔符
   你代码里app.use('/css', express.static(__dirname + 'public/css'))存在路径拼接错误，__dirname是项目根目录的绝对路径（末尾默认不带斜杠），直接拼接public/css会生成类似/你的项目路径public/css的非法路径，系统无法定位到对应目录，导致静态资源返回404。
2. EJS模板中CSS引用路径错误
   你已经配置了express.static('public')，相当于把public目录下的文件直接映射到服务根路径，不需要在请求路径里加public前缀。你当前写的../public/css/signin.css会实际请求http://localhost:8080/public/css/signin.css，和express的静态资源映射规则不匹配。
3. 静态资源配置冗余
   同时配置全局public静态目录、单独/css/js/img路由，重复配置容易导致路径匹配逻辑混乱。

解决步骤 #

第一步：修正静态资源配置 #

首先在server.js顶部引入path模块处理路径拼接，避免手动拼接出现斜杠缺失问题：

const path = require('path')

删掉冗余的单独路由配置，只保留全局public静态目录映射即可：

// 替换原来的4行静态资源配置
app.use(express.static(path.join(__dirname, 'public')))

如果确实需要保留单独的路由配置，就修正拼接逻辑：

app.use('/css', express.static(path.join(__dirname, 'public/css')))
app.use('/js', express.static(path.join(__dirname, 'public/js')))
app.use('/img', express.static(path.join(__dirname, 'public/img')))

第二步：修正EJS中的CSS引用路径 #

把signin.ejs里的link标签替换为如下写法：

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

第三步：重启服务验证 #

重启express服务后访问/signin路由，即可正常加载CSS文件。

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