Express应用CSS/JS加载失败及Bootstrap汉堡菜单失效求助

一、静态资源加载错误（CSS/JS 404 + MIME类型异常） #

核心原因 #

你在EJS模板里给静态资源加了public/前缀，但通过express.static托管public文件夹后，该文件夹会成为静态资源的根路径。此时请求http://localhost:3000/public/styles/style.css时，服务器会去public/public/styles/style.css查找文件，必然返回404错误页面，浏览器识别到响应的MIME类型为text/html，触发严格MIME检查报错。

修复方案 #

1. 修正EJS资源引用路径：
   • 将header.ejs中的样式引用改为：

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

   • 将footer.ejs中的脚本引用改为：

     <script src="/index.js"></script>
     

2. 确认静态资源托管路径正确性：
   若你的服务器入口文件直接放在项目根目录（与public文件夹同级），当前的express.static配置是正确的；如果入口文件在子文件夹（如src），则需调整路径：

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

   （__dirname此时指向子文件夹，需向上跳转一级到项目根目录）

二、Bootstrap汉堡菜单移动端失效问题 #

汉堡菜单的折叠/展开逻辑依赖Bootstrap的JavaScript组件（Bootstrap 5+已内置Popper.js，无需额外引入），必须加载Bootstrap JS才能生效。

修复方案 #

1. 引入Bootstrap本地JS文件：
   在footer.ejs的</body>标签前添加：

   <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   

   确保你已通过npm install bootstrap完成安装，路径与本地node_modules结构匹配。
2. 检查导航栏属性匹配：
   你的导航栏代码中data-bs-toggle="collapse"、data-bs-target="#navbarNavAltMarkup"与目标折叠容器的id="navbarNavAltMarkup"完全匹配，这部分无需修改。

验证步骤 #

修改后重启Express服务器，刷新页面：

• 查看浏览器控制台，确认静态资源无404和MIME错误
• 缩小浏览器窗口至移动端尺寸，点击汉堡菜单，验证菜单能否正常展开/收起

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