Koa 项目中使用 koa-static 中间件处理静态资源的方法

前言

开发一个 Web 应用，必须处理静态资源（如图片、样式和脚本等）。Koa 是一个 Node.js 的微型框架，而 koa-static 是一种处理静态资源的中间件。本文将会深入探讨如何在 Koa 项目中使用 koa-static 中间件处理静态资源。

安装 koa-static

使用 npm 安装 koa-static：

npm install koa-static

基本用法

在 Koa 应用中引入 koa-static 中间件：

const Koa = require('koa');
const static = require('koa-static');

const app = new Koa();
app.use(static(__dirname + '/public'));
app.listen(3000);

以上代码将在 public/ 目录中提供静态资源，例如 public/image.png 可以在浏览器中访问 http://localhost:3000/image.png。

注意： __dirname 是 Node.js 中的一个全局变量，它的值是当前文件所在目录的绝对路径。

指定别名

在上面的例子中，如果我们需要访问 public/file.txt，则需要访问 http://localhost:3000/public/file.txt。可以通过 koa-static 的 alias 选项设置别名：

// www.javascriptcn.com code example
const Koa = require('koa');
const static = require('koa-static');

const app = new Koa();
app.use(static(__dirname + '/public', {
  alias: {
    '/public': './'
  }
}));
app.listen(3000);

现在可以直接访问 http://localhost:3000/file.txt。

选项

koa-static 的选项可以控制其行为：

• maxage: 缓存超时时间（毫秒）
• hidden: 否显示隐藏文件，如 .gitignore
• index: 默认页文件名，默认为 index.html
• defer: 如果为 true，则直到请求结束后才返回资源
• gzip: 如果为 true，则尝试返回经过 gzip 压缩的文件， 可以将外部 gzip 压缩器应用于未经压缩的文件
• setHeaders: 指定 HTTP 响应头

示例代码

// www.javascriptcn.com code example
const Koa = require('koa');
const static = require('koa-static');
const app = new Koa();

// 指定 .jpeg 文件超时时间为 1 天，其它缓存时间为 1 小时
app.use(static(__dirname + '/public', {
  maxage: 86400000,
  setHeaders: function(res, path) {
    if (path.endsWith('.jpeg')) {
      res.setHeader('Cache-Control', 'public, max-age=86400000');
    } else {
      res.setHeader('Cache-Control', 'public, max-age=3600000');
    }
  }
}));

app.listen(3000);

以上代码会在所有公共文件中设置缓存控制头：

• 图片（以 .jpeg 结尾）缓存时间为 1 天（86400000 毫秒）。
• 其它文件缓存时间为 1 小时（3600000 毫秒）。

结论

koa-static 可以非常方便地处理静态资源。本文介绍了如何在 Koa 项目中使用 koa-static 中间件，以及如何使用缓存超时时间和指定 HTTP 响应头等选项。希望本文对正在学习 Koa 的前端开发者有所帮助。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67207cfb2e7021665e0274e1