本文详解如何利用 express.js 原生支持直接渲染 pug 模板并对外提供网页服务，无需手动编译为 html，也不要求根目录存在 index.html——只需正确配置视图路径与模板引擎即可实现专业级静态+动态混合托管。
本文详解如何利用 express.js 原生支持直接渲染 pug 模板并对外提供网页服务，无需手动编译为 html，也不要求根目录存在 index.html——只需正确配置视图路径与模板引擎即可实现专业级静态+动态混合托管。
在现代 Web 开发中，PUG（原 Jade）因其简洁语法和强大逻辑能力被广泛用于服务端模板渲染。许多开发者误以为“免费托管网站必须提供 index.html”，实则该限制仅适用于纯静态托管平台（如 GitHub Pages、Vercel 静态模式）。而当你使用 Express.js 作为后端服务器时，你完全可以在不转换任何 PUG 文件的前提下，直接托管整个 PUG 项目——关键在于让 Express 正确识别、加载并渲染这些模板。
✅ 核心配置步骤
假设你的项目结构如下：
my-app/
├── server.js # 主入口文件
├── package.json
└── views/
├── index.pug # 首页模板
├── about.pug
└── layout.pug
你需要在 server.js 中完成三步关键配置：
-
安装依赖（确保已安装）：
npm install express pug
-
设置模板引擎与视图路径：
const express = require('express'); const path = require('path'); const app = express();
// ✅ 关键：指定 PUG 模板所在目录（推荐使用绝对路径） app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'pug'); app.set('view options', { pretty: true }); // 可选：美化输出 HTML
// ✅ 关键：启用静态资源服务（如 CSS/JS/图片） app.use(express.static(path.join(__dirname, 'public')));
3. **定义路由并渲染 PUG 模板**：
```javascript
// 渲染根路径 → 自动查找 views/index.pug
app.get('/', (req, res) => {
res.render('index', {
title: '我的 PUG 网站',
message: '无需编译，实时渲染！'
});
});
// 渲染子页面 → 自动查找 views/about.pug
app.get('/about', (req, res) => {
res.render('about', {
title: '关于我们',
activeTab: 'about'
});
});
// 启动服务
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`✅ 服务运行于 http://localhost:${PORT}`);
});
? 注意：res.render('index') 会自动匹配 views/index.pug，无需写 .pug 扩展名；变量对象（如 { title: '...' }）将注入模板上下文，供 PUG 使用 #{title} 或 = title 输出。
? 常见误区与注意事项
- ❌ 不要将 .pug 文件放在 public/ 目录下——它们不会被自动渲染，只会被当作普通文件暴露（存在安全风险）；
- ✅ 所有 PUG 模板必须严格置于 app.set('views', ...) 指定的目录内（默认是 views/），否则 res.render() 会报错 Failed to lookup view；
- ⚠️ 若使用布局（layout.pug），需在模板顶部声明：extends layout，并用 block content 定义内容区；
- ? 部署到云平台（如 Render、Heroku、Railway）时，只需确保 start 脚本指向 node server.js，并正确设置 PORT 环境变量——PUG 渲染完全由 Node 进程完成，与托管平台无关。
? 总结
PUG 不是“需要预编译的前端模板”，而是 Express 原生支持的服务端模板引擎。只要 Express 服务正常运行，你就能以零改造成本继续使用现有 PUG 文件、路由逻辑和数据交互代码。真正需要编译 HTML 的场景，仅限于纯静态托管；而采用 Node.js 服务托管（推荐用于含动态逻辑的网站），PUG 就是最自然、最高效的选择。
? 官方参考：Express + Pug 官方文档｜PUG 语法指南
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
