在使用 Express.js 构建 Web 应用程序时，我们通常需要同时处理路由和静态文件。然而，当路由路径与静态文件路径相同时，会导致路由无法正常访问，这是一个常见的问题。本文将介绍如何解决这个问题。
背景
Express.js 是一个流行的 Node.js Web 框架，它提供了简单易用的路由和中间件机制。我们可以使用 app.get() 或 app.post() 等方法来定义路由，例如：
app.get('/users', (req, res) => {
res.send('User list');
});这个路由会匹配 /users 路径，并返回一个字符串。
同时，我们也可以使用 Express.js 提供的 express.static() 方法来托管静态文件，例如：
app.use(express.static('public'));这个方法会将 public 目录下的静态文件暴露出来，例如 public/index.html 可以通过 /index.html 访问。
然而，当路由路径与静态文件路径相同时，会导致路由无法正常访问。例如，当我们定义了一个 /users 路由，并且有一个 public/users.html 静态文件时，访问 /users 会显示静态文件而不是路由。
解决方法
为了解决这个问题，我们可以使用 Express.js 提供的 express.Router() 方法来创建一个路由器对象。这个路由器对象可以将多个路由组织在一起，并且可以指定路由的前缀。例如：
-- -------------------- ---- ------- ----- ------ - ----------------- --------------- ----- ---- -- - -------------- ------- --- -------------------- ----- ---- -- - -------------- ------- --- --------------- --------
这个代码片段创建了一个名为 router 的路由器对象，并定义了两个路由：/ 和 /users。然后，我们使用 app.use() 方法将这个路由器对象挂载到 /api 路径上。这意味着，访问 /api 会返回 Home page，访问 /api/users 会返回 User list。
这样，我们就可以通过路由器对象来处理路由，避免与静态文件路径冲突。同时，我们也可以使用 express.static() 方法来托管静态文件，例如：
app.use('/public', express.static('public'));这个方法会将 public 目录下的静态文件暴露出来，并将其挂载到 /public 路径上。因此，访问 /public/index.html 不会与路由冲突。
示例代码
下面是一个完整的示例代码，演示了如何使用路由器对象和 express.static() 方法来解决路由与静态文件路径冲突的问题：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- ------ - ----------------- --------------- ----- ---- -- - -------------- ------- --- -------------------- ----- ---- -- - -------------- ------- --- --------------- -------- ------------------ -------------------------- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
总结
在 Express.js 中，路由与静态文件路径冲突是一个常见的问题。为了解决这个问题，我们可以使用路由器对象来处理路由，并使用 express.static() 方法来托管静态文件。这样，我们可以避免路由与静态文件路径冲突，让 Web 应用程序更加健壮和可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658e20a8eb4cecbf2d3f1e88