Express + Handlebars视图查找失败问题求助

问题描述 #

我正在学习使用Express、Handlebars搭建Node.js项目，调用res.render('formulario')时，系统找不到位于view/layouts/formulario.handlebars的视图文件，还抛出错误：

Error: Failed to lookup view "anotherform" in views directory "./views"
at Function.render (C:\Users\Victor\Desktop\VSCODE\ProjetoNODE\node_modules\express\lib\application.js:597:17)
at ServerResponse.render (C:\Users\Victor\Desktop\VSCODE\ProjetoNODE\node_modules\express\lib\response.js:1039:7)
at C:\Users\Victor\Desktop\VSCODE\ProjetoNODE\index.js:26:13
at Layer.handle [as handle_request] (C:\Users\Victor\Desktop\VSCODE\ProjetoNODE\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\Victor\Desktop\VSCODE\ProjetoNODE\node_modules\express\lib\router\route.js:144:13)
at Route.dispatch (C:\Users\Victor\Desktop\VSCODE\ProjetoNODE\node_modules\express\lib\router\route.js:114:3)
at Layer.handle [as handle_request] (C:\Users\Victor\Desktop\VSCODE\ProjetoNODE\node_modules\express\lib\router\layer.js:95:5)
at C:\Users\Victor\Desktop\VSCODE\ProjetoNODE\node_modules\express\lib\router\index.js:284:15
at Function.process_params (C:\Users\Victor\Desktop\VSCODE\ProjetoNODE\node_modules\express\lib\router\index.js:346:12)
at next (C:\Users\Victor\Desktop\VSCODE\ProjetoNODE\node_modules\express\lib\router\index.js:280:10)

我试过修改res.render()里的名称、对应视图文件名，甚至改用主页面都没用，但res.send()能正常工作。附上相关代码：

项目代码 #

const express = require("express");
const app = express();
const handlebars = require('express-handlebars');
const bodyParser = require('body-parser');
const Sequelize = require('sequelize');

// Config
// Template Engine
app.engine('handlebars', handlebars.engine({defaultLayout: 'main'}));
app.set('view engine', 'handlebars');
app.set("views", "./views");
// Body Parser
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
// MySql connection
const sequelize = new Sequelize('teste', 'root', 'idohaveanotherpasswordhere', {
    host: "localhost",
    dialect: 'mysql'
});

// Routes
app.get('/form', function(req, res){
    res.render('forms');
});

app.post('/add', function(req, res){
    res.send("Texto: "+req.body.titulo+" Conteudo: "+req.body.conteudo);
});

//localhost:8081
app.listen(8081, function(){
    console.log("Server running on URL http://localhost:8081");
});

问题路由代码 #

app.get('/form', function(req, res){
    res.render('formulario');
});

解决方案 #

1. 修正视图文件存放位置 #

Handlebars的layouts目录是用来放布局框架文件（比如包含通用头部、底部的主模板），而普通视图文件要放在views根目录或views下的自定义子目录中，不能放在layouts里。

正确的文件结构示例：

项目根目录/
├── views/
│   ├── layouts/
│   │   └── main.handlebars  # 默认布局文件
│   └── formulario.handlebars  # 你的视图文件
└── index.js

2. 确保文件名与res.render()参数完全匹配 #

• 检查文件名大小写：Windows系统对文件名大小写不敏感，但Linux/macOS敏感，建议统一使用小写命名。
• 如果视图放在子目录（比如views/forms/formulario.handlebars），则路由要写成：

  app.get('/form', function(req, res){
      res.render('forms/formulario');
  });
  

3. 核对错误中的视图名称 #

错误提示查找的是anotherform，但你贴的路由代码里是formulario，说明你当前运行的代码可能和贴出的不一致，先确认代码是否保存、是否有缓存残留，重启Node服务再测试。

4. 验证默认布局文件有效性 #

你配置了defaultLayout: 'main'，必须确保views/layouts/main.handlebars存在，并且文件中包含{{{body}}}标签——这个标签是用来插入视图内容的占位符，没有它布局无法正常渲染视图。

5. 确认视图目录路径正确 #

你设置的app.set("views", "./views");是正确的，但要确保./views目录确实在项目根目录下，并且Node.js有读取该目录的权限。

内容的提问来源于stack exchange，提问作者Victor Guzella da Costa