Express配置含多级/的嵌套路由时CSS样式失效如何解决？

问题触发原因 #

这个问题是静态资源相对路径解析规则导致的：
你在Pug模板中使用href='style.css'的相对路径引入样式，浏览器会根据当前页面的URL层级自动拼接资源请求地址：

• 访问平级路由/blog-post1时，页面的基准路径是站点根目录/，拼接后请求地址为/style.css，刚好匹配public目录下的样式文件，因此加载正常
• 访问多级路由/blog/post1时，页面的基准路径是/blog/，拼接后请求地址变为/blog/style.css，这个路径并不存在，Express匹配不到静态资源时会默认返回text/html类型的404页面，因此触发MIME类型不匹配的报错。

修复方案 #

• 方案1：使用绝对路径引入静态资源（最推荐）
  将Pug模板中的样式引入路径改为以/开头的绝对路径，代表从站点根目录开始查找资源，不受当前页面路由层级影响：

link(rel='stylesheet', href='/style.css')

• 方案2：配置base标签统一页面基准路径
  在Pug模板的head标签内添加base标签，指定当前页面所有相对路径的拼接基准，无需挨个修改资源引入路径：

base(href="/")

• 方案3：显式配置静态资源路由前缀
  如果你的静态资源统一放在特定目录下，可以在Express中给静态资源中间件添加统一前缀，避免路径冲突：

// 所有静态资源请求都需要带/static前缀
app.use('/static', express.static('public'))

对应修改样式引入路径即可：

link(rel='stylesheet', href='/static/style.css')

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