EJS中CSS文件加载失败返回404错误，本地服务器运行正常如何解决

你遇到的404错误是静态资源挂载路径和页面引用路径不匹配导致的，具体有两处配置错误：

1. 静态资源挂载路径写错：app.use('./css', ...) 中挂载前缀多了.，Express的路由挂载前缀需要以/开头，使用./会导致路径匹配失效。
2. 引用路径和挂载规则不匹配：你在页面中引用/assets/css/style.css，但现有配置并没有把assets目录挂载到/assets前缀下，无法匹配到对应的文件。

解决方案（二选一即可，不要同时使用） #

方案1：统一使用/assets前缀（推荐，结构更清晰）

1. 删除现有全部静态资源相关配置：

app.use('./css',express.static(path.resolve(__dirname,"assets/css")));
app.use('/img',express.static(path.resolve(__dirname,"assets/img")));
app.use('/js',express.static(path.resolve(__dirname,"assets/js")));
app.use(express.static("assets"));

2. 替换为以下配置：

app.use('/assets', express.static(path.join(__dirname, 'assets')))

3. 页面中的CSS引用路径/assets/css/style.css不需要修改，刷新页面即可正常加载。

方案2：保留分类型挂载的逻辑

1. 修改css挂载路径的前缀，去掉开头的.：

// 修改前
// app.use('./css',express.static(path.resolve(__dirname,"assets/css")));
// 修改后
app.use('/css',express.static(path.resolve(__dirname,"assets/css")));

2. 修改页面中CSS的引用路径，去掉/assets前缀：

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

额外检查项 #

• 确认style.css文件确实存放在项目根目录下的assets/css文件夹中，文件名拼写、大小写完全匹配。
• 确认启动服务的工作目录是项目根目录，不要在子目录下启动服务。

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