KeystoneJS静态资源路由异常问题咨询

嘿，我之前用KeystoneJS搭博客时也碰到过一模一样的问题！明明配置了static: 'public'，根路由下静态资源加载完全正常，一进多级路由比如/blog/category，就发现资源请求路径变成了/blog/styles/...，简直头疼。

问题根源 #

你写的/styles/bootstrap/bootstrap.min.css看起来是绝对路径，但实际上在某些模板渲染场景或者路由上下文影响下，浏览器可能错误地把它解析成了相对当前路由的路径。不过更稳妥的方式是用KeystoneJS自带的工具来处理静态资源路径，而不是硬写路径。

解决方案：用Keystone的__static全局变量 #

KeystoneJS会自动给模板上下文注入一个__static变量，它的值就是你配置的静态资源目录对应的根URL（比如你设了static: 'public'，那__static就指向网站根目录的静态资源入口）。不管当前在哪个路由层级，用它拼接出来的路径都是绝对正确的。

把你Pug模板里的代码改成这样：

// 用Pug的字符串插值语法
link(type='text/css', rel='stylesheet', href=`${__static}/styles/bootstrap/bootstrap.min.css`)

// 或者用加号拼接
link(type='text/css', rel='stylesheet', href=__static + '/styles/bootstrap/bootstrap.min.css')

额外检查项 #

• 确认你的Keystone初始化配置里确实正确设置了静态目录：

const keystone = require('keystone');

keystone.init({
  // 其他配置项...
  static: 'public', // 确保这行存在且路径正确
  // 其他配置项...
});

• 如果你是用自定义Express中间件或者反向代理（比如Nginx）部署，要确保静态资源的路由规则没有被覆盖，但如果是用Keystone自带的开发服务器，上面的方法就足够解决问题了。

这样改完之后，不管你访问/还是/blog/category，静态资源都会从正确的根路径加载，不会再出现路径错误啦！

内容的提问来源于stack exchange，提问作者chdecultot