koa 静态资源处理
发表更新 Sea 技术6 分钟读完 (大约973个字)0次访问

koa 静态资源处理

本文将介绍 koa 静态资源处理。

如今有静态资源（dist/index.html）：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
  </head>
  <body>
    <div id="root-slave-container">Hello World</div>
  </body>
</html>

和dist/index.js

1
console.log('Hello World');

koa-static

如果网站提供静态资源（图片、字体、样式表、脚本……），为它们一个个写路由就很麻烦，也没必要。koa-static模块封装了这部分的请求，起到了静态文件托管的作用。

示例代码如下：

1
2
3
4
5
6
7
8
import Koa from 'koa';
import path from 'path';
import koaStatic from 'koa-static';

const app = new Koa();
app.use(koaStatic(path.resolve(__dirname, '../dist')));

app.listen(3000);

运行上述代码后访问http://localhost:3000，在浏览器上即可看到这个网址内容，默认加载index.html文件。

image-20210715110325735

访问http://localhost:3000/index.js

image-20210715111451719

Koa 会在静态资源目录下查找文件，所以不会把静态目录作为 URL 的一部分。

虚拟静态目录

如果要给静态资源文件创建一个虚拟的文件前缀(实际上文件系统中并不存在) ，可以使用koa-mount中间件指定一个虚拟的静态目录。

koa-mount 是一个将中间件挂载到指定路径的 Koa 中间件。它可以挂载任意 Koa 中间件.

语法如下：

1
2
3
import koaMount from 'koa-mount';

app.use(koaMount('/koa-static', koaStatic(path.resolve(__dirname, '../dist'))));

访问http://localhost:3000/koa-static即可看到文件内容，

image-20210715110717212

访问http://localhost:3000/koa-static/index.js

image-20210715111612551

小 Tip：在部署打包好的 react 项目时，前端使用的是 HTML5 的 history，页面一刷新就 404 了，所以后端配置koa-history-api-fallback中间件来支持：（中间件实现的功能是如果 当 URL 匹配不到任何静态资源，返回指定的页面（中间件默认返回的是 index.html，配置参考文档）

1
2
3
4
5
6
7
8
import historyApiFallback from 'koa-history-api-fallback';

// 加载路由信息
app.use(router.routes());
app.use(router.allowedMethods());

app.use(historyApiFallback());
app.use(koaStatic(path.resolve(__dirname, '../public')));

historyApiFallback 一定要放在所有接口路由后面，否则所有接口都是返回 index.html 了。
historyApiFallback 一定要在静态资源前面，否则资源找不到

koa-static-cache

这个中间件的目的也是帮助我们托管静态资源文件。按照配置的路径在浏览器的 URL 地址中输入带prefix前缀的路径就能访问到 static 目录下的文件。和koa-static区别是：

image-20210715112107970

示例代码：

1
2
3
4
5
6
7
import koaStaticCache from 'koa-static-cache';

app.use(
  koaStaticCache(path.resolve(__dirname, '../dist'), {
    prefix: '/koa-static', // 如果当前请求的url是以 /koa-static 开始，则作为静态资源请求
  })
);

当我们访问http://localhost:3000/koa-static/index.html，这个时候中间件就会将我们的请求代理到dist文件夹下的index.html，读取文件，自动识别 MIME 类型，然后进行响应。

image-20210715112741146

访问http://localhost:3000/koa-static/index.js

image-20210715114541451

参考链接

koa 静态资源处理

https://hailangya.com/articles/2021/07/15/koa-static/

作者

Sea

发布于

2021-07-15

更新于

2023-01-10

许可协议

#

喜欢这篇文章？打赏一下作者吧

评论

目录

订阅更新

邮件订阅，更新早知道

×