EJS模板引入public目录下HTML文件失败问题求助

数据老陈

2026-6-12

EJS模板引入HTML片段失败的解决方法

问题原因

EJS的include函数默认从视图目录（你设置的src/views）查找文件，而你的myFragment.html放在了public/fragments下——public是Express用于托管静态资源（CSS、JS等）的目录，EJS不会自动去这个目录里查找模板片段，所以直接写相对路径会找不到。

解决方案

方案一：调整文件结构（推荐）

把HTML片段移到视图目录下，符合Express项目规范：

在src/views下创建fragments文件夹，把myFragment.html移进去，目录结构变为：

rootdir
- src
-- views
--- myPage.ejs
--- fragments
---- myFragment.html

修改myPage.ejs里的include路径：

<body>
  <%- include("./fragments/myFragment.html") -%>
</body>

这样EJS就能直接定位到文件，无需额外配置。

方案二：使用绝对路径（不移动文件）

如果不想调整文件结构，需要用path模块拼接绝对路径，确保EJS能找到public下的片段：

修改index.js，引入path模块并暴露给模板：

const express = require('express'); 
const path = require('path');
const app = express();

// 设置视图目录的绝对路径，避免相对路径歧义
app.set('views', path.join(__dirname, 'src/views'));
app.set('view engine', 'ejs');               
app.use(express.static('public'));

// 把path模块和片段目录路径暴露给所有EJS模板
app.locals.path = path;
app.locals.fragmentDir = path.join(__dirname, 'public/fragments');

修改myPage.ejs的include代码（二选一即可）：

<body>
  <!-- 方式1：直接拼接绝对路径 -->
  <%- include(path.join(__dirname, '../../public/fragments/myFragment.html')) -%>
  
  <!-- 方式2：用提前定义的fragmentDir（更简洁） -->
  <%- include(path.join(fragmentDir, 'myFragment.html')) -%>
</body>