Pug模板出现缩进不一致报错，能否改用HTML对接app.js？

前置清理操作 #

• 执行npm uninstall pug移除项目中的Pug依赖
• 删除app.js中原有的Pug相关视图配置，一般是以下两行：
  app.set('view engine', 'pug')
app.set('views', path.join(__dirname, 'views'))

场景1：使用纯静态HTML，无动态数据渲染需求 #

• 在项目根目录新建public文件夹，将所有原生HTML、CSS、JS、图片等静态资源放入该文件夹
• 在app.js中添加静态资源托管配置：
  app.use(express.static(path.join(__dirname, 'public')))
• 配置完成后可直接通过HTML文件名访问对应页面，例如public/index.html访问根路径即可打开，public/about.html访问/about.html即可打开，也可自行配置路由实现路径美化。

场景2：需要给HTML传递动态参数 #

无需改动原生HTML代码，可借助ejs模板引擎兼容原生HTML语法：

• 执行npm install ejs安装ejs
• 在app.js中添加视图配置：

app.set('view engine', 'html')
app.engine('html', require('ejs').renderFile)
app.set('views', path.join(__dirname, 'views'))

• 将写好的原生HTML文件放入项目根目录的views文件夹中，文件后缀保持.html即可
• 路由调用方式和原有Pug用法一致，示例：

app.get('/', (req, res) => {
  res.render('index', {
    pageTitle: '首页',
    userInfo: req.user
  })
})

• 不需要渲染动态参数的部分完全按原生HTML语法编写即可，没有缩进要求，需要插入参数的位置添加<%= 参数名 %>即可。

无模板引擎方案 #

如果不想引入任何模板引擎，可直接通过sendFile返回指定HTML文件：

const path = require('path')
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'))
})

该方案完全遵循原生HTML开发规则，无任何额外语法约束。

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