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目录下又该如何配置，有兴趣的可以自行探索。
下一节是接口模拟
网友评论