头图

【koa2】用中间件koa-static-router 搭建静态资源服务器,实现多级路由加载静态资源

源码及使用说明 Git仓库

安装

npm install koa-static-router

Usage

  • 单个路由
const static = require('koa-static-router');
 app.use(
   static({
     dir,  //静态资源目录对于相对入口文件index.js的路径
     route   //路由命名
   })
 )
  • 多个路由

选择多个路由时,请确保路由长度相同
'/static/' - >路由长度 = 1
'/static/image1/' - >路由长度 =2

const static = require('koa-static-router');

app.use(
  static([
    {
      dir,     //静态资源目录对于相对入口文件index.js的路径
      router    //路由命名
    },{
      dir,
      router  
    }
  ])
)

Demo

git clone
cd koa-static-router
npm install 
npm start
  1. 访问 localhost:3000/public/image/dir/1.png

  1. 访问 localhost:3000/static/image/dir/2.png

const Koa = require('koa')
const app = new Koa()
const static = require('koa-static-router');


// 单个路由
// app.use(static({
//   dir:'public',
//   router:'/static/'     //路由长度 =1
// }))


//多个路由
app.use(static([
    {
        dir:'public',    //静态资源目录对于相对入口文件index.js的路径
        router:'/public/image/'   //路由命名   路由长度 =2
    },{
        dir:'static',   //静态资源目录对于相对入口文件index.js的路径
        router:'/static/image/'    //路由命名  路由长度 =2
    }
]))

app.use( async ( ctx ) => {
  ctx.body = 'hello world'
})

app.listen(3000, () => {
  console.log('build success')
})

Devin前端技术分享
前端技术专栏
30 声望
2 粉丝
0 条评论
推荐阅读
route-resource-preload 拆包,尽最大努力减少首屏幕加载资源,并提供优质的用户体验
组件懒加载可以极大地提升我们的应用首屏加载体验, 但我们在进行组件资源拆包后,一旦加载某个组件资源出现以上时间过长的情况,则会出现视图无法正常渲染的问题(导致页面白屏/组件出不来/交互卡顿等情况)。

daivon阅读 342

封面图
反编译微信小程序获取小程序前端源码wxapkg
研究反编译的原因就是我自己辛苦了半个月写的小程序,忘记备份放在桌面,心急体验Win11系统 重装系统忘记备份源码,后悔莫及。 后来网上找了反编译的教程,反编译已经上线了的小程序 于是自己尝试了一下,真的可...

TANKING13阅读 10k评论 7

封面图
PDF 预览和下载你是怎么实现的?
在开发过程中要求对 PDF 类型的发票提供 预览 和 下载 功能,PDF 类型文件的来源又包括 H5 移动端 和 PC 端,而针对这两个不同端的处理会有些许不同,下文会有所提及。

熊的猫7阅读 3.8k评论 1

封面图
Just for fun——C#应用和Nodejs通讯
进程通信常见的进程通讯的方法有:管道(Pipe)命名管道信号消息队列其他管道是比较简单基础的技术了,所以看看它。Node IPC支持Node官方文档中Net模块写着:IPC SupportThe net module supports IPC with named ...

pigLoveRabbit3阅读 6.8k评论 2

「过程详解」async await综合题
如果你之前跟我一样一直对async await熟悉又陌生的话(熟悉是可能每天都在用,陌生是针对一些组合题又丈二和尚摸不着头脑),不妨可以边看边练,总结规律,相信会逐渐清晰并有所得。本文对每个案例都详细描述了代...

wuwhs5阅读 1.2k

封面图
cligetter|一款快速生成 Cli工具 开发模版的脚手架
近年来 cli工具 的开发,对于不断发展的前端生态来说,似乎也逐渐成为工程师们的必备技能。其实开发一个 cli工具 并不难,但对于前端的同学可能存在一点认知上的小门槛,特别是对于刚开始接触 cli 脚手架工具开发...

木木剑光3阅读 656

一个灵活的 Node.js 多功能爬虫库 —— x-crawl
x-crawl · x-crawl 是一个灵活的 Node.js 多功能爬虫库。灵活的使用方式和众多的功能可以帮助您快速、安全、稳定地爬取页面、接口以及文件。如果你也喜欢 x-crawl ,可以给 x-crawl 存储库 点个 star 支持一下,...

coderhxl2阅读 1.9k评论 2

封面图
30 声望
2 粉丝
宣传栏