使用koa-static中间件持续返回404错误的原因排查

我来帮你拆解下这个问题的核心原因，以及对应的解决办法：

问题根源 #

你遇到的404本质是koa-static的路径解析逻辑导致的：koa-static接收的路径参数是相对当前模块文件所在的目录，而不是项目的根目录。

看你的代码，sites/onesite/index.js里用了serve('.')，这个.指向的是sites/onesite/目录，但你的index.html在项目根目录，所以koa-static根本找不到这个文件，自然返回404。

解决方案 #

这里给你三种可行的解决思路，按需选择：

1. 使用绝对路径指定静态目录（最稳妥） #

借助Node的path.resolve方法生成项目根目录的绝对路径，这样不管你的模块放在哪，路径都不会错。修改sites/onesite/index.js：

const Koa = require('koa')
const serve = require('koa-static')
const path = require('path')
const app = new Koa()
// ../../ 表示从onesite目录往上跳两级，回到项目根目录
app.use(serve(path.resolve(__dirname, '../../')))
module.exports = app

2. 简化中间件结构（更优雅） #

其实你没必要在子模块里再创建一个完整的Koa实例，直接导出koa-static中间件就行，这样既减少冗余，也能避免路径混淆：

• 先修改sites/onesite/index.js：

const serve = require('koa-static')
const path = require('path')
// 直接导出静态服务中间件
module.exports = serve(path.resolve(__dirname, '../../'))

• 再修改sites/sites.js：

const compose = require('koa-compose')
const onesiteStatic = require('./onesite')
module.exports = () => {
  return compose([onesiteStatic])
}

3. 调整静态文件位置（如果业务允许） #

如果你的静态文件本来就应该属于onesite模块，那把根目录的index.html移动到sites/onesite/目录下，原来的serve('.')就能正常工作，不需要修改代码。

验证 #

修改完成后重启服务，访问http://localhost，应该就能正常看到Hello, koa的内容了。

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