Node.js中使用express-handlebars报错：shop.hbs存在却无法找到

问题根源 #

你的配置中模板引擎名称与模板文件后缀不匹配：你注册的引擎名称是handlebars，但模板文件用的是.hbs后缀，Express会按照引擎名称去寻找对应后缀的文件（即.handlebars），因此找不到shop.hbs。

两种修复方案 #

方案一：统一使用.hbs后缀（推荐） #

修改app.js中的引擎注册和视图引擎设置，让Express识别.hbs后缀的文件：

const path = require("path");

const express = require("express");
const bodyParser = require("body-parser");
const expressHbs = require("express-handlebars");

const app = express();

// 创建hbs实例，指定文件后缀为hbs
const hbs = expressHbs.create({
  extname: "hbs",
});

// 注册名为hbs的引擎，并设置视图引擎为hbs
app.engine("hbs", hbs.engine);
app.set("view engine", "hbs");
app.set("views", "views");

const adminData = require("./routes/admin");
const shopRoutes = require("./routes/shop");

app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, "public")));

app.use("/admin", adminData.routes);
app.use(shopRoutes);

app.use((req, res, next) => {
  res.status(404).render("404", { pageTitle: "Page Not Found" });
});

app.listen(3000);

方案二：修改模板文件后缀为.handlebars #

如果不想改动代码，直接将views目录下的所有.hbs文件（shop.hbs、add-product.hbs、404.hbs）重命名为.handlebars后缀，Express就能匹配到对应的视图文件。

验证 #

修改完成后重启服务，访问对应路由，视图文件就能正常加载了。

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