为何JS逻辑在Express+EJS的页面中以文本形式显示？

嘿，我之前也碰到过一模一样的问题！这明显是你的EJS局部视图没有被正确解析，导致模板里的<% ... %>这类逻辑代码直接被当成普通文本输出了。咱们一步步来排查解决：

• 用正确的EJS语法引入局部视图
  你得确保在主模板（比如index.ejs或者layout.ejs）里用<%- include('局部视图路径') %>来引入contact视图，注意是<%-而不是<%或者<%=：

  • <%-：会把包含的模板内容解析后输出，保留所有HTML和执行逻辑
  • <%=：会转义HTML内容，把逻辑代码当成文本输出
  • <%：只执行逻辑但不输出内容
    举个正确的引入示例：

  <!-- 假设contact.ejs在views/partials目录下 -->
  <%- include('./partials/contact') %>
  

• 确认Express的EJS配置无误
  检查你的Express应用是否正确设置了EJS作为模板引擎，并且指定了正确的视图目录：

  const path = require('path');
  const express = require('express');
  const app = express();
  
  // 设置EJS为模板引擎
  app.set('view engine', 'ejs');
  // 指定视图文件所在目录
  app.set('views', path.join(__dirname, 'views'));
  

  另外，你的局部视图文件必须是.ejs后缀（比如contact.ejs），不能用.html，否则EJS不会解析里面的模板逻辑。

• 检查局部视图的语法完整性
  从你提供的代码片段来看，结尾的逻辑好像没写完：<% } else { %><h2 class="errors-heading">Oops, please cor...，是不是缺少了闭合的<% } %>？如果模板里有未闭合的逻辑块，EJS会无法正确解析，导致逻辑代码直接输出。
  完整的逻辑代码应该是这样的：

  <div class="form-header">
    <% if (Object.keys(errors).length === 0) { %>
      <h2>Send us a message aa</h2>
    <% } else { %>
      <h2 class="errors-heading">Oops, please correct the errors below</h2>
    <% } %>
  </div>
  

  确保所有的<%都有对应的%>，逻辑结构是完整闭合的。

• 禁用模板缓存（开发环境）
  开发时有时候模板缓存会导致修改不生效，你可以在Express里禁用缓存：

  app.set('view cache', false);
  

  或者直接重启你的Express服务器，让最新的模板代码被加载。

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