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

koa中间件koa-static-router中间件搭建静态资源服务器,实现复杂路由加载静态资源

源码及使用说明 Git仓库

安装

$ npm install koa-static-router

Usage

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

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

const static = require('koa-static-router');
app.use(static([
    {
    dir,     //静态资源目录对于相对入口文件index.js的路径
    router    //路由命名
},{
    dir,
    router  
}
]))
Demo (https://github.com/Rise-Devin/koa-static-router)
git clone
cd koa-static-router
npm install 
npm start

访问 localhost:3000/public/image/dir/1.png

访问 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')
})
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用 Koa 框架时,设置静态目录和使用 koa2-swagger-ui 可能会产生冲突,因为它们都涉及到路由的处理。 当你使用 Koa 的 `koa-static` 中间件设置静态目录时,该中间件会将请求路径匹配到指定的静态文件,并返回给客户端。这意味着如果你的静态目录的路径与 Swagger UI 的路由路径相同,会导致冲突。 为了避免冲突,您可以考虑以下两种解决方案之一: 1. 将 Swagger UI 的路由路径设置为不与静态目录冲突的路径。例如,将 Swagger UI 的路由路径设置为 `/api-docs` 或其他不与现有静态目录路径冲突的路径。 2. 在 Koa路由处理中间件之前使用 `koa2-swagger-ui` 中间件。这样可以确保 Swagger UI 的路由优先于其他路由处理中间件执行,避免冲突。 下面是一个示例代码片段,演示了如何在 Koa 中设置静态目录和使用 koa2-swagger-ui: ```javascript const Koa = require('koa'); const serve = require('koa-static'); const koaSwagger = require('koa2-swagger-ui'); const app = new Koa(); // 设置静态目录 app.use(serve('public')); // 设置 Swagger UI app.use(koaSwagger({ routePrefix: '/api-docs', // 设置 Swagger UI 的路由路径 swaggerOptions: { url: '/swagger.json', // 设置 Swagger JSON 文件的路径 }, })); // 添加其他路由处理中间件 // ... app.listen(3000, () => { console.log('Server started on port 3000'); }); ``` 在上述示例中,静态目录设置为 `public`,Swagger UI 的路由路径设置为 `/api-docs`。这样就可以避免静态目录和 Swagger UI 的冲突。 请根据您的具体需求和项目结构进行适当的调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值