在使用 Koa 框架构建应用时，常常会遇到访问静态资源时出现 404 的问题。这是因为 Koa 默认不处理静态资源，需要我们手动配置才能让 Koa 识别并提供静态资源服务。这里我们介绍一个小技巧，通过 koa-send 模块来解决这个问题。
koa-send 模块
koa-send 是一个 Koa 模块，可以用来处理静态资源请求，并发送结果到客户端。
安装 koa-send 模块：
npm install koa-send --save
Koa-send 模块的 API 如下：
const send = require('koa-send');
send(ctx, path, options);ctx是 Koa 的 context 对象。path是静态资源的路径。options是一个可选参数，用于配置 send 的行为。
下面我们分步骤来介绍如何使用 koa-send 模块来解决静态资源 404 问题。
步骤一：添加 koa-send 中间件
首先，我们需要在 Koa 应用中添加 koa-send 中间件，将静态资源的请求交给 koa-send 来处理。在 Koa 应用中，我们可以使用 koa-static 模块来创建一个处理静态资源请求的中间件。安装 koa-static 模块：
npm install koa-static --save
然后在 Koa 应用中添加 koa-static 中间件：
const Koa = require('koa');
const serve = require('koa-static');
const app = new Koa();
app.use(serve('public'));这里我们将静态资源放在项目根目录下的 public 文件夹中。其中 serve('public') 指定了静态资源的目录，这样 Koa 就会去 public 目录下找到对应的资源。
步骤二：处理静态资源请求
接下来，我们需要在 Koa 应用中处理静态资源请求。这里我们可以通过 Koa 的中间件来实现，将静态资源请求交给 koa-send 来处理。
app.use(async (ctx, next) => {
if (ctx.path.startsWith('/public')) {
await send(ctx, ctx.path.substring(7), { root: __dirname });
} else {
await next();
}
});这段代码中，我们使用了一个中间件函数来处理静态资源请求。当 URL 的路径以 /public 开头时，我们就交给 koa-send 来处理，否则就跳过。
在 koa-send 的第三个参数中，我们指定了静态资源的根目录为 __dirname，即当前文件所在目录。这样 koa-send 就会在当前文件所在目录的 public 文件夹下查找指定资源。
需要注意的是，在使用 koa-send 时，我们需要将 URL 的 /public/ 前缀去掉，因为 koa-send 会自动在指定的根目录下查找资源。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
----- --- - ---------------
----- ----- - ----------------------
----- ---- - --------------------
----- --- - --- ------
-------------------------
------------- ----- ----- -- -
-- -------------------------------- -
----- --------- ---------------------- - ----- --------- ---
- ---- -
----- -------
-
---
------------- --- -- -
-------- - ------ -------
---
-----------------总结
使用 koa-send 模块可以方便地解决 Koa 应用中静态资源 404 问题。我们可以通过添加 koa-static 中间件来处理静态资源请求，再通过一个中间件函数将请求交给 koa-send 来处理，最终返回静态资源给客户端。这样可以避免手动处理静态资源的麻烦，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b3182968c7c53b0a9a920
