Node.js中使用Hono.js的serveStatic提供静态文件遇404的解决办法

问题背景 #

项目目录结构：

• 根目录 ./
  • public/
    • signin.html
  • （路由逻辑文件）

使用Hono.js的子路由user（挂载在/user路径下），尝试通过serveStatic提供静态文件，已尝试两种写法均返回404，但用c.text/c.json能正常响应，说明路由本身配置正确：

尝试代码1：

user.use("/static/*", serveStatic({ root: "./" }));
user.get("/signin", serveStatic({ path: '../public/signin.html'}));

尝试代码2：

user.get("/signin", serveStatic({ root: "./", rewriteRequestPath: (path) => path.replace(/^\/signin/, '/public')}));

访问/user/signin时日志显示404：

<-- GET /user/signin
--> GET /user/signin 404 9ms

错误原因分析 #

1. 第一种写法的path参数使用了错误的相对路径：../public/signin.html会跳出项目根目录，导致文件找不到；且serveStatic的path参数需配合root使用，单独使用相对路径易受当前执行上下文影响。
2. 第二种写法的rewriteRequestPath仅将路径替换为/public，指向的是目录而非具体文件signin.html，因此serveStatic无法定位到目标文件。

解决方案 #

方案1：直接使用c.sendFile返回单个文件（最简洁） #

对于单个静态文件的路由，无需使用serveStatic，直接用Hono内置的sendFile方法，路径相对于项目根目录即可：

user.get("/signin", async (c) => {
  return c.sendFile("./public/signin.html");
});

方案2：修正serveStatic的rewrite规则指向具体文件 #

如果坚持使用serveStatic，需确保rewrite后的路径指向具体文件，同时root设为项目根目录：

user.get("/signin", serveStatic({
  root: "./",
  rewriteRequestPath: () => "/public/signin.html"
}));

或用正则精确替换：

user.get("/signin", serveStatic({
  root: "./",
  rewriteRequestPath: (path) => path.replace(/^\/signin$/, '/public/signin.html')
}));

方案3：挂载整个public目录并自动映射文件（适合多静态文件场景） #

如果需要提供多个静态文件，可以将serveStatic挂载到子路由，通过rewrite隐藏public路径并自动匹配.html后缀：

user.use("/*", serveStatic({
  root: "./public",
  rewriteRequestPath: (path) => {
    // 当访问/user/signin时，映射到public/signin.html
    if (path === '/signin') return '/signin.html';
    // 其他路径保持原规则
    return path;
  }
}));

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