koa2 从入门到进阶(六)-静态资源

上一篇讲了 POST 和 koa-bodyparser。页面里还要引入外部的 js、css、图片时，相对路径在 Koa 里经常 404。这一篇用 koa-static 把静态目录挂出去。

按以前写静态页的习惯，在 index.ejs 里用相对路径引 style.css 和一张图片，浏览器实际请求的是 http://localhost:3000/static/css/style.css 和 http://localhost:3000/static/img/1.jpg。app.js 里没有对应路由，所以控制台会报找不到文件。

一、相对路径为什么失败

下面这份 app.js 只配了模板和首页路由，没有把 /static 映射到磁盘目录。ejs 里写的相对路径，对浏览器来说就是再打一条 HTTP 请求，必须有中间件或路由接住。

//引入 koa模块
const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views');

//实例化
const app = new Koa();
const router = new Router();

//配置模板引擎中间件
app.use(views('views', {
    extension: 'ejs'
}));

router.get('/', async (ctx) => {
    await ctx.render('index', {});
});

//启动路由
app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

二、用 koa-static 挂静态目录

先安装模块。再用 app.use(static(...)) 把磁盘上的 static 目录暴露出去。中间件会先尝试匹配该目录下的文件，找不到再交给后面的路由。

npm install koa-static --save

//引入 koa模块
const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views');
const static = require('koa-static');

//实例化
const app = new Koa();
const router = new Router();

//配置静态资源中间件
app.use(static(__dirname + "static"));
//配置模板引擎中间件
app.use(views('views', {
    extension: 'ejs'
}));

router.get('/', async (ctx) => {
    await ctx.render('index', {});
});

//启动路由
app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

__dirname 是当前文件所在目录的绝对路径。原文第一处写成了 __dirname + "static"，中间少了路径分隔符，应写成 __dirname + "/static"，也可以写成 static("./static")。

挂上中间件后，模板里的引用改成指向 static 目录下的文件（例如 /css/style.css、/img/1.jpg，具体以你挂载的根目录为准）。样式和图片都能加载，就说明静态资源已经通了。

一句话总结：模板里的 css/js/图片是新的 HTTP 请求；用 koa-static 把磁盘目录挂上，路径记得加 /static 分隔符。