Node.js Express开发中EJS无法导入公共页头组件问题求助

AI 小北

2026-10-22

问题根因

你虽然配置了EJS模板引擎，但所有路由都通过res.sendFile()直接返回静态文件，Express完全不会对文件内容做EJS语法解析，模板里的EJS代码只会被当作普通文本发送给浏览器，因此页面会直接显示<%- include('partials/header') %>字符串，无法渲染页头组件。

完整修复步骤

调整模板文件后缀
把src/views目录下的主页面文件从.html后缀全部改为.ejs后缀：
- 原index.html → index.ejs
- 原admin.html → admin.ejs
- 原aboutme.html → aboutme.ejs
  无需修改partials目录下的header.ejs后缀

修改入口文件的路由返回逻辑
用EJS专属的res.render()方法替换原有res.sendFile()，同时显式指定EJS视图的查找路径，修改后的index.js核心代码如下：

var express = require('express')
var app = express()
const port = 8080;

// 指定EJS模板的根查找路径，匹配你的文件目录结构
app.set('views', './src/views');
// 配置EJS为模板引擎
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    // 直接传入模板文件名，无需加.ejs后缀
    res.render('index');
});

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

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

app.listen(port, () => {
    console.log(`Example app listening on port ${port}!`)
});

校验目录结构
确保文件层级符合EJS的查找规则：
```
src/
└── views/
    ├── index.ejs
    ├── admin.ejs
    ├── aboutme.ejs
    └── partials/
        └── header.ejs
```
这样主模板里的<%- include('partials/header') %>就能正确定位到页头组件文件，正常渲染。