Express + Handlebars 配置About页面报错：Failed to lookup view "about" in views directory "views"

看起来你的Home页面能正常跑起来，但About页面一直找不到视图，我帮你梳理下问题所在和解决办法：

1. 路由路径写错了 #

你当前的About路由是：

app.get('/views/layouts/about', (req, res) => {
  res.render('about');
});

这里的/views/layouts/about是模板文件的存储路径，不是用户访问的URL路径！用户访问About页面应该用简洁的路径比如/about，所以把路由改成：

app.get('/about', (req, res) => {
  res.render('about');
});

2. 确认模板文件位置正确 #

Handlebars默认会去views目录下找你render的模板文件，所以你需要确保about.hbs文件是放在**项目根目录/views/**下（和你的home.hbs同级），而不是views/layouts文件夹里——layouts是用来放布局模板（比如你的main.hbs）的地方，不要把页面模板放在这里。

3. 清理重复的配置代码 #

你的代码里多次重复设置views目录和view engine，比如：

app.set('view engine', 'hbs')
app.set('views', 'views')
app.set('views', path.join(__dirname, 'views'));
app.set("view engine", "hbs");

这些重复配置不仅冗余，还可能导致潜在的路径冲突，保留一次正确的配置就够了，推荐改成：

// 只保留一次视图目录和模板引擎的配置
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

修改后的完整代码示例 #

const express = require('express');
const app = express();
const path = require('path');
const exphbs = require("express-handlebars");

const PORT = process.env.PORT || 5000;

// 设置静态文件夹（如果需要的话可以取消注释）
// app.use(express.static(path.join(__dirname, 'public')));

// 配置Handlebars中间件
const hbs = exphbs.create({
  defaultLayout: 'main',
  extname: 'hbs'
})

app.engine('hbs', hbs.engine)
// 清理重复配置，保留一次即可
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

// Home页路由
app.get('/', (req, res) => {
  res.render('home'); // 可以省略.hbs后缀，因为已经设置了extname
});

// About页路由（修正后的路径）
app.get('/about', (req, res) => {
  res.render('about'); // 同样省略后缀即可
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

最后再检查一遍：

• 确认about.hbs确实在views目录下
• 启动服务器后访问http://localhost:5000/about应该就能正常加载页面了

备注：内容来源于stack exchange，提问作者Оксана Нефедова