如何在Express与EJS中引入HTML文件？模板渲染异常排查

我帮你梳理下这个问题的核心原因和解决步骤——看起来你的EJS语法或者模板渲染方式出了问题，导致服务器直接输出了原始的EJS标签，没有正确解析include指令。

1. 修正EJS Include语法（最可能的原因） #

EJS在v3.x版本之后彻底废弃了旧的<% include path %>语法，改用函数式的<%- include('path') %>写法：

• 用<%-代替<%：<%-会将include的HTML内容输出到页面，而<%仅执行代码不输出内容
• 路径需要用引号包裹，并且是相对于当前模板文件的相对路径

你的dashboard.html在views/profile目录下，而模板文件在views/templates，所以正确的include路径应该是：

<%- include('../templates/inc_header.html') %>
This is my dashboard

如果你的EJS版本是v2.x（比较老的版本），可以保留旧语法，但路径不需要引号：

<% include ../templates/inc_header.html %>
This is my dashboard

2. 确保通过Express的res.render渲染模板 #

你配置了静态文件目录为wwwroot/static，但views里的模板文件不能直接通过静态URL访问，必须通过Express路由调用res.render来触发EJS引擎的渲染。

比如添加一个路由：

// 引入path模块（如果还没引入）
const path = require('path');

// 仪表盘路由
app.get('/dashboard', (req, res) => {
  res.render('profile/dashboard'); // 这里的路径对应views/profile/dashboard.html
});

当你访问http://localhost:3000/dashboard时，Express会自动调用EJS引擎解析模板，include的头部文件也会被正确渲染。

3. 验证EJS版本和配置正确性 #

检查你的package.json里的EJS版本，如果是v3+，必须使用新的函数式include语法。同时确认你的Express配置没有问题（推荐用path.join避免路径拼接问题）：

const app = express();
// 配置EJS处理.html文件
app.engine('.html', require('ejs').renderFile);
app.set('view engine', 'html');
// 设置视图根目录
app.set('views', path.join(__dirname, '/wwwroot/views'));

// 其他中间件配置...
app.use(session({ secret: program.secret || "secret", resave: true, saveUninitialized: true }));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }))
app.use('/', express.static(path.join(__dirname, '/wwwroot/static/')));

测试验证 #

1. 重启Express服务器
2. 访问你配置的路由（比如/dashboard）
3. 查看页面源码，应该能看到inc_header.html里的内容，而不是原始的EJS标签

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