如何在Node.js Express项目中同时使用HBS与EJS两种视图引擎
双模板引擎兼容可落地方案
核心逻辑:利用Express原生的多引擎映射能力,完全不需要依赖consolidate.js这类第三方适配库,既保留原有hbs的全局默认配置,又能单独渲染ejs格式的账户成绩页,从根源上避免全局切换引擎导致原有页面崩溃的问题。
第一步:基础依赖确认
先确保项目同时安装两个模板引擎包,不需要额外装consolidate:
- 执行
npm install hbs ejs安装依赖 - 把之前为了适配引擎临时修改的全局配置全部恢复到项目原本能正常运行hbs页面的状态,删掉之前临时写的
app.set('view engine', 'ejs')这类会覆盖默认逻辑的代码
第二步:核心配置代码
所有原有hbs的配置(视图目录、局部视图注册、helper方法绑定)完全原样保留,只追加ejs的单独引擎映射:
const express = require('express'); const hbs = require('hbs'); const path = require('path'); const app = express(); // 以下是你项目原本就能跑的hbs配置,不要改动 app.set('views', path.join(__dirname, 'views')); // 保留原有视图目录配置 app.set('view engine', 'hbs'); // *保持hbs为全局默认引擎,绝对不要改成ejs* // 保留你原来写的hbs.registerPartials、hbs.registerHelper等所有逻辑 hbs.registerPartials(path.join(__dirname, 'views/partials')); // 单独追加ejs引擎注册,不需要全局覆盖 // ejs本身自带Express适配的渲染方法__express,直接绑定即可,不需要走consolidate app.engine('ejs', require('ejs').__express);
第三步:路由与文件路径适配
- 把从教程里参考的ejs格式成绩页,直接放到原有
views目录下,保持文件后缀为.ejs,比如存为views/account/grade.ejs,不要改后缀成hbs,也不要单独开辟新的视图目录。 - 写对应的账户页路由时,render的文件路径必须带上.ejs后缀,避免引擎误匹配hbs找对应的.hbs文件报错:
app.get('/my-account', (req, res) => { // *注意路径末尾的.ejs后缀,会触发刚才注册的ejs引擎渲染,不会走默认hbs逻辑* res.render('account/grade.ejs', { // 正常传入模板需要的用户信息、成绩列表等数据即可 userInfo: req.session.currentUser, scoreList: req.session.userScores }); });
之前踩坑的常见原因
- 错误把全局默认视图引擎改成ejs,导致所有原来不带后缀的
res.render调用,都会去查找.ejs格式的模板,原有hbs文件全部匹配失败报500 - 使用consolidate.js配置时,没有在render时明确指定文件后缀,导致引擎匹配规则错乱,hbs和ejs的渲染逻辑互相干扰
- 配置ejs引擎时绑定的渲染方法错误,导致ejs模板读取失败
上线前快速校验
- 先访问任意一个原有hbs页面(比如首页、登录页),确认页面渲染正常,没有模板报错,说明原有hbs链路没有被改动
- 再访问
/my-account路由,确认ejs格式的成绩页能正常读取数据、完成渲染,没有模板找不到的报错 - 整个配置过程没有引入额外的第三方适配依赖,不会给临期提交的项目增加额外的兼容风险
内容的提问来源于stack exchange,提问作者T H
相关产品推荐
相关产品推荐

