zoukankan      html  css  js  c++  java
  • 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>

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

     
  • 相关阅读:
    linux apache + mysql +php no-yum
    linux apache + mysql +php
    1像素border
    vue-router配置
    错误Cannot find module 'stylus'
    高仿饿了么mock本地数据
    vue2.0高仿饿了么better-scroll
    npm 常用命令
    Gulp工具常用插件
    git总结
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/13168803.html
Copyright © 2011-2022 走看看