Express.js问题：无法从public文件夹加载CSS与JS文件

核心问题分析 #

你的项目里public文件夹下直接存放style.css和script.js，但EJS模板里写的路径是/styles/style.css和/scripts/script.js——路径层级不匹配，再加上可能的express.static配置问题，导致资源加载失败。

具体解决步骤 #

1. 修正EJS中的资源引用路径
   去掉多余的子目录层级，直接引用根路径下的资源：

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

2. 确保express.static中间件配置正确
   在app.js中必须将静态资源挂载代码放在所有路由定义之前，否则路由会优先拦截请求：

   const express = require('express');
   const app = express();
   
   // 挂载public作为静态资源目录（同级目录情况）
   app.use(express.static('public'));
   
   // 如果public和app.js不在同级，用绝对路径更稳妥
   // const path = require('path');
   // app.use(express.static(path.join(__dirname, 'public')));
   
   // 后续的路由配置
   app.get('/', (req, res) => {
     res.render('index');
   });
   
   app.listen(3000, () => {
     console.log('Server running on port 3000');
   });
   

3. 验证静态资源是否可访问
   启动服务器后，直接在浏览器地址栏输入http://localhost:3000/style.css，如果能看到CSS文件的内容，说明静态资源配置没问题，再刷新页面查看样式是否生效。

4. 排查浏览器缓存问题
   若配置正确但样式仍不生效，按Ctrl+F5强制刷新页面，或者给资源路径加版本号（比如/style.css?v=1），避免浏览器缓存旧资源。

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