vscode 不运行 ejs,仅编辑;真正渲染需 node.js 调用 ejs.renderfile() 或 express 的 res.render();live server 为静态服务,不执行模板编译,故显示源码。

VSCode 本身不运行 EJS,它只是编辑器;真正渲染必须靠 Node.js 环境调用 ejs.renderFile() 或 Express 的 res.render()。直接双击打开 .ejs 文件,或用 Live Server 插件打开,浏览器只会显示原始模板代码——这不是配置错误,是设计如此。
为什么 Live Server 打开 .ejs 文件只显示源码?
Live Server 启动的是纯静态 HTTP 服务,不加载 Node.js,也不执行任何模板编译逻辑。它把 index.ejs 当作普通文本文件返回,浏览器既不会解析 EJS 标签,也不会触发下载(除非 MIME 类型被误设)。
- 常见现象:
Cannot GET /、页面空白、右键“Open with Live Server”后看到原样输出 - 根本原因:EJS 是服务端模板,必须由 Node.js 进程调用
ejs包完成字符串替换 - 误区纠正:
node index.ejs会报错ReferenceError: require is not defined,因为 EJS 文件不是可执行 JS 脚本
最小可行配置:Express + ejs 启动本地服务
不需要复杂脚手架,一个 app.js + views/ 目录就能跑起来。关键不是装多少包,而是路径和顺序是否正确。
使用一条命令部署ProbeChain Rydberg测试网代理节点。自动注册为Agent(NodeType=1),免gas,支持macOS/Linux/Windows。触发词:/r
- 项目结构必须为:
./views/index.ejs(不能放根目录,也不能放src/下) -
app.set('views', './views')必须在app.set('view engine', 'ejs')之前调用 -
res.render('index')中的参数不要带.ejs后缀;写成res.render('index.ejs')会报Failed to lookup view - 静态资源(CSS/JS)统一放
public/,用app.use(express.static('public'))挂载
直接用 ejs 包做单文件渲染(无 Express 场景)
如果你只是想快速验证某个 EJS 模板是否语法正确,或生成静态 HTML 文件,可以绕过 Express,直接调用 ejs 模块。
- 安装:
npm i ejs(无需全局) - 新建
render.js:
const ejs = require('ejs');
const fs = require('fs');
<p>ejs.renderFile('./views/index.ejs', { title: '测试页', list: [{ name: '张三' }] }, (err, str) => {
if (err) throw err;
fs.writeFileSync('./dist/index.html', str);
console.log('✅ 已生成 dist/index.html');
});</p>
- 运行:
node render.js,生成的index.html可用 Live Server 直接打开 - 注意:
renderFile()路径是相对当前工作目录的,不是相对于node_modules - 这个方式适合构建阶段预渲染,不适合开发时热更新
最容易被忽略的一点:EJS 模板里的 会自动转义 HTML 字符,而 不转义——如果传入的数据含 HTML 片段(比如富文本),漏掉减号会导致页面显示标签源码而不是渲染效果。










