HTML文件中EJS模板include相对路径引用及__dirname未定义报错求助

错误原因 #

__dirname是Node.js的全局变量，默认不会注入到EJS模板的运行上下文中，所以直接在模板中调用会抛出未定义错误。

解决方案 #

方案1：直接使用相对当前模板的路径（最便捷） #

根据你给出的目录结构，index.ejs存放在views根目录下，partials文件夹是views的同级子目录，直接用./代表当前index.ejs所在目录即可，修改后的模板代码如下：

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <!-- THIS SECTION IS FOR <head> TAG THAT WILL BE STORED INSIDE "so_head-tag.ejs" -->
  <%- include('./partials/so_head-tag.ejs') %>

<body>

  <!-- THIS SECTION IS FOR NAVIGATION BAR THAT WILL BE STORED INSIDE "so_header.ejs" -->
  <%- include('./partials/so_header.ejs') %>

  <div class="filler">

  </div>

  <!-- THIS SECTION IS FOR FOOTER BAR THAT WILL BE STORED INSIDE "so_footer.ejs" -->
  <%- include('./partials/so_footer.ejs') %>

  <!-- THIS SECTION IS FOR JAVASCRIPT FILES THAT WILL BE STORED INSIDE "so_javacript.ejs" -->
  <%- include('./partials/so_javacript.ejs') %>

</body>

</html>

只要你views目录下的文件结构保持不变，迁移到任意服务器都不需要修改路径。

方案2：全局配置模板根目录（适合多嵌套模板的项目） #

如果你用的是Express框架，可以在项目启动配置中指定模板根目录，后续所有include路径都可以直接从根目录开始计算，不需要写相对层级。
配置代码：

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

// 配置ejs模板引擎和根目录
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

配置完成后，模板中的include可以直接简化为：

<%- include('partials/so_head-tag.ejs') %>

方案3：手动注入__dirname变量（不推荐） #

如果确实需要在模板中使用__dirname，可以在渲染页面时把该变量作为参数传入模板：

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

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