koa-static与koa-router是不是不好相处啊?koa遇到的问题,大侠来瞅瞅

今天写koa框架,路由使用的是koa-router中间件,静态资源使用的是koa-static中间件。
如果路由是下面这一种:

router.use('/index',function *(next){
     yield 渲染模板
})

页面渲染没有问题。

但是如果是下面这一种

router
  .get('/users/:user', function *(next) {
    yield 渲染模板
  })

这种情况就会出现css文件路径错误。
出现的错误是:

GET `http://localhost:4000/users/css/index.css` 

css正确的访问路径是:

http://localhost:4000/css/index.css

为什么要去请求'http://localhost:4000/users/css/index.css'呢?
是不是koa-static与koa-router没有办法好好的合作呢?

.......................补充...........................
koa-static的写法:

app.use(serve(__dirname+'/static/'));

页面中引用css的路径:

css/index.css

文件目录如下图:
图片描述

文件夹static里有一个css文件夹,里面是css文件。

.............补充,解决了................

No.1

//koa-static中间件设置
app.use(serve(__dirname+'/static'));

//css引入路径
css:'/css/index.css

No.2

//koa-static中间件设置
app.use(serve(__dirname+'/static/'));

//css引入路径
css:'css/index.css

对于"http://localhost:4000/index"这种路径,上面两种方式没有问题。
但是"http://localhost:4000/index/red"这种路径,使用No.1才不会出问题。
No.1的写法是官方例子。No.2是我试着玩的,果然出错了。多谢大家捧场!

阅读 16.7k
6 个回答

hi,能看看你 css 文件路径那里是怎么写的么,以及 use static 的地方

页面中引用css的路径改成:

/css/index.css

相对路径绝对路径的问题

/user/index 页面里面是 'css/index.css' 是 /user/css/index.css
/user/abc/ddd 页面里面是 'css/index.css' 是 /user/abc/css/index.css

只需如此如此

静态文件用相对路径不好

宣传栏