Node.js项目中localhost/about/任意路径404页面CSS未生效问题

• 所有静态资源使用了相对路径引用，资源的实际加载路径会跟随当前页面的URL层级变化：
  1. 访问localhost/{随机文本}时，页面URL的基准路径为/，相对路径public/css/styles.css会被浏览器拼接为/public/css/styles.css，匹配你配置的静态资源路由，因此加载正常
  2. 访问localhost/about/{随机文本}时，页面URL的基准路径为/about/，相对路径public/css/styles.css会被拼接为/about/public/css/styles.css，该路径不存在对应的静态资源，因此样式加载失败
• 404页面内的图片使用了相对层级路径../../public/images/404error.png，同样会受URL层级影响，在多级路由下无法匹配到正确的资源路径

• 第一步：修改header.hbs中的CSS引用为绝对路径（开头加/表示从站点根路径开始寻址）
  原代码：

  <link rel="stylesheet" href="public/css/styles.css">
  

  修改后：

  <link rel="stylesheet" href="/public/css/styles.css">
  

• 第二步：修改404.hbs中的图片引用为绝对路径
  原代码：

  <img src="../../public/images/404error.png" alt="">
  

  修改后：

  <img src="/public/images/404error.png" alt="">
  

• 第三步：可删除你额外添加的app.get('/about/*' ...)路由，现有全局*路由已经可以覆盖所有未定义路径的404返回，无需重复配置

修改完成后重启服务即可，所有路径下的404页面都能正常加载样式和图片资源。

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