Express项目Jade模板路由配置后访问/meal返回404渲染失败问题

核心问题点 #

以下问题按影响优先级排序，全部修复后功能即可正常运行：

• 视图引擎配置错误（导致Jade模板无法渲染）
  1. app.js中配置项名写错：你写的app.set('views engine', 'jade')是无效配置，Express识别视图引擎的配置项固定为view engine，没有末尾的s；同时你注释掉了视图路径配置，Express根本不知道模板文件存在哪个目录，必须补充视图路径声明。
  2. 模板渲染路径写法错误：配置好视图路径后，res.render()只需要传模板文件名即可，不需要写磁盘绝对路径。
  3. Jade模板语法错误：meal.jade第一行重复写了doctype，且继承layout后重复声明html根标签会导致结构冲突。
• 路由逻辑错误（导致接口返回404）
  1. 路由路径重复叠加：你在app.js中已经给mealRouter绑定了/meal前缀，又在routes/meal.js内给每个路由加了/meal路径，最终实际匹配的路径是/meal/meal，直接访问/meal自然匹配不到路由。
  2. 路由挂载对象错误：routes/meal.js中新建了独立的Express实例var app = express()，一半的HTTP方法路由都绑在了这个独立实例上，根本没有注册到最终导出的router对象上，这部分路由永远不会生效。
• 其他低级代码错误
  1. POST路由中调用了不存在的console.send()方法，会触发运行时报错。
  2. PATCH路由中HTTP方法名拼写错误（把PATCH写成了PACTH）。
  3. package.json中启动脚本指向的入口是./bin/www，和你实际使用的app.js入口不匹配，用npm start会启动失败。
  4. 重复注册了body解析、静态资源托管中间件，属于冗余代码不影响运行但建议清理。

修复步骤 #

1. 修改app.js中的视图配置，替换原有错误配置：

   // 视图配置
   app.set('views', path.join(__dirname, 'views'));
   app.set('view engine', 'jade');
   

2. 重构routes/meal.js代码，删除多余的Express实例，修正路由路径：

   var express = require('express');
   var router = express.Router();
   // 删除 var app = express(); 这行，路由文件不需要新建服务实例
   
   // 所有路由路径改为/，因为父级已经绑定了/meal前缀
   router.get('/', function(req, res, next) {
       res.render('meal'); // 直接传模板名，不需要全路径和后缀
   });
   
   router.post('/', (req, res) => {
       console.log(req.query, req.body); // 把console.send改成console.log
       res.json({ code: 1 });
   });
   
   router.patch('/', (req, res) => {
       res.send(`PATCH request to / body:${JSON.stringify(req.body)}`);
   });
   
   // 剩下的copy/lock/purge/head/link/delete/options/connect/trace路由
   // 全部把app.改成router.，路径统一改成/即可
   router.copy('/', (req, res) => res.send('COPY request to /'));
   router.lock('/', (req, res) => res.send('LOCK request to /'));
   router.purge('/', (req, res) => res.send('PURGE request to /'));
   router.head('/', (req, res) => res.send('HEAD request to /'));
   router.link('/', (req, res) => res.send('LINK request to /'));
   router.delete('/', (req, res) => res.send('DELETE request to /'));
   router.options('/', (req, res) => res.send('OPTIONS request to /'));
   router.connect('/', (req, res) => res.send('CONNECT request to /'));
   router.trace('/', (req, res) => res.send('TRACE request to /'));
   
   module.exports = router;
   

3. 修正meal.jade语法错误，简化模板结构（因为已经继承了layout，不需要重复写html根结构）：

   doctype html
   extends layout
   
   block content
     p meal plan
   

4. （可选）修改package.json的启动脚本，和实际入口匹配：

   "scripts": {
     "start": "node app.js"
   }
   

验证 #

修复完成后重启Node服务，访问localhost:3000/meal即可正常渲染Jade模板，各HTTP方法请求也能正常匹配路由，不会再返回404。现有npm依赖版本没有兼容性问题，不需要重新安装包。

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