koa-static 静态资源中间件

安装 koa-static ，配置静态服务：
　　npm install  koa-static --save
配置中间件：

 app.js

const Koa = require('koa')
const app = new Koa()
const router = require('koa-router')()
const ejs = require('ejs')
const views = require('koa-views')
const serve = require('koa-static')

//应用ejs 模板引擎
app.use(views('views',{
    extension:'ejs'
}))

//配置koa-static 中间件
app.use(serve('./static')) //去static目录找静态文件 ，如果能找到返回对应的文件，找不到 next()

router.get('/',async (ctx)=>{
    console.log("首页")
    await ctx.render('index')
})

app.use(router.routes());  
app.use(router.allowedMethods());
app.listen(3000);

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="base.css">  
</head>
<body>
    <h3>index.ejs页面</h3>
    <div class="box"></div>
</body>
</html>

注意引入 base.css ，直接以 static 为根目录的静态资源路径

配置时，也可以使用 绝对路径：

还可以配置多个静态目录：

 配置 static1 和 static2 两个静态目录，static1 中是 css 资源 ， static2 中放入一张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="base.css">
</head>
<body>
    <h3>index.ejs页面</h3>
    <div class="box"></div>
    <img src="1.jpg" alt="">
</body>
</html>

引入这两个静态资源，都可以渲染到页面上：

 

 

 
posted @ 2021-01-30 19:08  shanlu  阅读(881)  评论(0)    收藏  举报