Node.js中使用Express Params时静态样式文件路径失效如何解决

出现该问题的核心原因是页面使用相对路径引用静态资源时，浏览器会自动将相对路径与当前页面的URL路由路径拼接，你访问的带参数页面有三层子路径，因此静态资源路径被错误拼接。
可根据你的业务情况选择以下任意一种方案解决：

• 方案1：修改静态资源引用为绝对路径
  将页面中所有样式、脚本、图片等静态资源的引用路径开头添加/，例如原引用路径assets/css/style.css修改为/assets/css/style.css。修改后浏览器会始终从站点根目录加载资源，完全不受当前页面路由层级影响。
• 方案2：全局设置相对路径解析基准
  不需要逐个修改静态资源引用，只需在页面的<head>标签内添加base标签即可：

<base href="/">

该标签会指定页面内所有相对路径的解析基准为站点根目录，同样可以避免路径拼接问题。

• 方案3（可选）：调整参数传递规则
  如果业务场景允许，可将三个参数改为查询参数传递，路由调整为如下写法：

router.get('/technic-service', (req, res) => {
    res.render('technic-service', { params: req.query })
})

调整后访问路径变为website.com/technic-service?droneSerialName=1&droneModelName=1-3&droneAltModelName=1-3-2，路由层级固定，从根源上避免了相对路径拼接问题。

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