Node.js应用中子路由Bootstrap失效问题求助

环境信息 #

• 服务器框架：express
• 模板引擎：ejs

问题现象 #

Bootstrap样式/脚本仅在以下路由正常生效：

• /
• /auth
• /auth/

在嵌套子路由下完全失效：

• /auth/login
• /auth/signup

问题原因 #

核心问题是模板中引用Bootstrap资源时使用了相对路径。比如写了css/bootstrap.min.css，当访问/auth/login时，浏览器会自动将路径解析为/auth/css/bootstrap.min.css，但静态资源实际存放在项目根目录的public文件夹下，导致资源请求404，Bootstrap无法正常加载。

解决步骤 #

1. 确认Express已正确配置静态资源目录（通常在app.js中）：

const path = require('path');
// 把public文件夹设为静态资源根目录
app.use(express.static(path.join(__dirname, 'public')));

2. 在EJS模板中改用绝对路径引用Bootstrap的CSS和JS文件，示例：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<!-- Bootstrap JS -->
<script src="/js/bootstrap.bundle.min.js"></script>

（注意路径开头的/，表示从网站根目录开始查找资源）

如果是通过CDN引入Bootstrap，路径本身就是绝对的，不会出现这类问题，重点排查本地资源的引用路径即可。

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