koa2入门系列 Part 4

2020-02-07 本文已影响0人郁南

koa静态文件配置

上一节讲述了在koa中的模版渲染，也就是html文件在koa中的应用，但作为前端的渲染文件，光渲染内嵌文本内容还不够，正常的前端项目引入模块以及图片等静态文件必不可少，那么在koa中如何引入静态文件呢？
这就用到本节讨论的koa-static静态文件处理中间件了。

首先下载yarn add koa-static；
然后在根目录新建static文件夹，并在该文件夹下新建css文件夹以及对应的index.css文件，还有img文件夹并放入一张本地图片；

/* css/index.css */
.text{
  color:#f40;
}

接着在配置文件app.js中使用静态资源中间件

// ...
const static = require('koa-static');

//配置静态资源中间件
/**
 * 其中 __dirname 是我们当前目录绝对路径的意思，
 * 当然我们也可以写成 app.use(static("./static"))
 *  */
app.use(static(__dirname + '/static'));

最后是在模版文件中使用本地的静态资源

// index.ejs
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>首页</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <div class="text">静态资源使用</div>
    <img src="img/tree.png" alt="" />
  </body>
</html>

重启服务，刷新浏览器

完美！
最终app.js代码如下

//引入 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();

//配置静态资源中间件
/**
 * 其中 __dirname 是我们当前目录绝对路径的意思，
 * 当然我们也可以写成 app.use(static("./static"))
 *  */
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(3001);

ps:

需要注意的是，静态文件的路径必须配置是根目录下的/static，而不能是./static或者static，至于static文件夹放在比如views目录下又该如何配置，有兴趣的可以自行探索。
下一节是接口模拟

koa2入门系列 Part 4

koa静态文件配置

ps:

猜你喜欢

热点阅读