Express含单参数路由无法加载public文件夹静态文件求助

问题根源 #

你遇到的问题是静态资源的相对路径解析错误：

• 当访问带参数的路由（如/param/1）时，浏览器会把页面中相对路径的静态资源（比如assets/js/bundle.js）解析为/param/1/assets/js/bundle.js，但你的静态文件实际存放在根目录的public文件夹下，导致服务器返回404。
• 后续的MIME类型错误是404的连锁反应：服务器找不到静态文件，返回了默认的HTML错误页面，浏览器把HTML当成JS执行，触发MIME校验失败。

解决方案 #

方案1：改用绝对路径引用静态资源 #

直接在模板文件（如page.ejs/page.pug等）中把资源引用改成绝对路径（开头加/）：

<script src="/assets/js/bundle.js"></script>
<link rel="stylesheet" href="/assets/css/style.css">

这样不管当前路由是什么，浏览器都会从网站根目录（/）开始查找静态资源，匹配你配置的express.static目录。

方案2：给静态资源设置虚拟路径前缀 #

如果不想修改模板里的路径，可以调整静态文件中间件的配置，添加虚拟路径前缀：

// 替换原有静态资源配置
app.use('/assets', express.static(path.resolve(__dirname, "public/assets")));

此时访问/assets/js/bundle.js时，服务器会从public/assets/js/bundle.js读取文件，模板中需对应使用绝对路径/assets/...来引用资源。

方案3：统一管理模板中的资源路径 #

如果你使用模板引擎（如EJS），可以在渲染路由时传入根路径变量，统一管理资源路径：

routes.get("/param/:id", (req, res) => {
  res.render("page", { basePath: "/" });
});

然后在模板中使用变量拼接路径：

<script src="<%= basePath %>assets/js/bundle.js"></script>

额外检查点 #

• 确认public文件夹结构正确：public/assets/js/bundle.js文件是否存在。
• 验证中间件配置顺序：确保app.use(express.static(...))写在所有路由配置之前，让请求优先匹配静态资源。

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