Express.js动态路由下静态资源加载失败问题求助

问题根源 #

动态路由（如/team/:memberName、/testimonial/:authorName）访问时，页面中静态资源的相对路径会被浏览器解析为基于当前路由的路径，而非网站根路径。比如页面里写css/style.css，访问/team/john时浏览器会请求/team/css/style.css，但你的静态资源实际托管在根路径下的/css/style.css，服务器找不到对应资源就返回404页面，导致MIME类型被识别为text/html而非正确的资源类型。

修复方案 #

1. 改用绝对路径引用静态资源

把页面中所有静态资源的引用路径前加上斜杠/，强制以网站根路径为基准：

<!-- 错误的相对路径 -->
<link rel="stylesheet" href="css/style.css">
<script src="js/app.js"></script>
<img src="img/avatar.jpg">

<!-- 改为绝对路径 -->
<link rel="stylesheet" href="/css/style.css">
<script src="/js/app.js"></script>
<img src="/img/avatar.jpg">

2. 确认静态资源托管配置正确

检查你的App.js中express.static的配置，确保托管的是正确的静态资源目录：

const express = require('express');
const path = require('path');
const app = express();

// 正确配置：将public目录设为静态资源根目录
app.use(express.static(path.join(__dirname, 'public')));

// 你的动态路由
app.get('/team/:memberName', (req, res) => {
  res.render('team-member', { name: req.params.memberName });
});

这里假设你的静态资源都放在项目根目录下的public文件夹里，结构如下：

project/
├── public/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── app.js
│   └── img/
│       └── avatar.jpg
└── App.js

3. 模板引擎场景的优化（可选）

如果使用EJS、Pug等模板引擎，可以统一设置根路径变量，避免手动加斜杠：
比如在EJS中，先在路由里传递根路径变量：

app.get('/team/:memberName', (req, res) => {
  res.render('team-member', { 
    name: req.params.memberName,
    rootPath: '/'
  });
});

然后在模板中使用：

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

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