安装 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>
引入这两个静态资源,都可以渲染到页面上: