Node.js路由文件中无法访问静态资源的问题

你遇到的这个问题本质是浏览器对相对路径的解析逻辑导致的：

• 当页面在根路径（比如http://localhost:3000/）时，页面里的相对路径bootstrap/bootstrap.min.css会被浏览器解析为http://localhost:3000/bootstrap/bootstrap.min.css，正好匹配你通过express.static配置的public目录，所以资源能正常加载。
• 但当页面在/blog/post这类嵌套路由下时，浏览器会把相对路径解析为http://localhost:3000/blog/bootstrap/bootstrap.min.css——而你的静态资源根本不在blog子目录下，自然就找不到了。

下面给你几个实用的解决办法，按推荐程度排序：

方法1：改用绝对路径引用静态资源（最推荐） #

不需要修改后端代码，只需要把HTML页面里的静态资源引用改成以/开头的绝对路径即可。

比如原本的资源引用：

<link rel="stylesheet" href="bootstrap/bootstrap.min.css">

修改为：

<link rel="stylesheet" href="/bootstrap/bootstrap.min.css">

这样不管当前页面在哪个路由路径下，浏览器都会从网站根目录去查找静态资源，完美匹配你在app.js中配置的public目录。

方法2：为静态资源设置虚拟前缀（适合资源管理更清晰的场景） #

如果你想把静态资源和业务路由明确区分开，可以给静态资源加一个虚拟前缀，比如/static。修改app.js中的静态资源配置：

// 原来的配置
// app.use(express.static(path.join(__dirname, 'public')));
// 修改后的配置
app.use('/static', express.static(path.join(__dirname, 'public')));

然后在HTML里引用资源时使用这个前缀的绝对路径：

<link rel="stylesheet" href="/static/bootstrap/bootstrap.min.css">

这种方式能避免静态资源路径和业务路由路径冲突，适合中大型项目。

方法3：在blog路由中重复挂载静态资源（不推荐） #

虽然可以在/routes/blog.js里也添加静态资源中间件，但这会导致所有/blog开头的请求都要重复走一遍静态资源检查，浪费服务器性能，所以不建议这么做。如果非要尝试，代码如下：

// 在blog.js顶部添加（不推荐）
const path = require('path');
router.use(express.static(path.join(__dirname, '../public')));

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