Express 模板引擎

Question

模板引擎 允许您将 Express 配置为与流行的模板引擎（如 Pug 、 Mustache 等）无缝协作。 在本教程中，您将学习如何将 Pug 添加为模板引擎，以及如何编写您自己的最小模板引擎，使 Express 能够与 Vue 的服务器端渲染 一起工作。

使用哈巴狗

Pug （以前称为 Jade）是最流行的 Express 模板引擎之一。 Pug 是一种支持循环和条件的空白敏感 HTML 模板语言。 例如，下面是一些有效的 Pug 代码：

h1
  | Hello, #{name}!

假设上面的代码在 views/test.pug 文件。 以下是如何使用 Express 进行渲染 test.pug 为你。 注意 app.set('view engine', 'pug') call 是告诉 Express 使用 Pug 进行模板化的方式。 字符串 'pug' 指的是您要用作模板引擎的 npm 模块。

const express = require('express');

const app = express();
// Use `pug` to preprocess all calls to `res.render()`.
app.set('view engine', 'pug');

app.get('*', (req, res) => {
  // Assuming the Pug code is in `views/test.pug`
  res.render('test', { name: 'World' });
});

const server = await app.listen(3000);

// Example of using the server
const axios = require('axios');

const res = await axios.get('http://localhost:3000');
res.data; // '<h1>Hello, World!</h1>'

使用 Vue 服务器渲染器

默认情况下，并非所有模板语言都适用于 Express。 起来很容易 值得庆幸的是，编写自己的模板引擎 以将您最喜欢的模板语言与 Express 结合 。 例如，假设您有以下 Vue 模板：

<h1>Hello, {{name}}</h1>

如果你试着打电话 app.set('engine', 'vue-server-renderer') , Express 会抛出一个 Module "vue-server-renderer" does not provide a view engine 错误。 您需要添加一些胶水代码来告诉 Express 如何调用 Vue 服务器渲染器。

要告诉 Express 如何处理 Vue 模板，你应该使用 app.engine() 功能。 这 app.engine() 函数有两个参数：一个字符串 name 告诉 Vue 这个模板引擎的名称，以及一个 templateEngine 加载和编译给定模板的函数。 下面是你如何写一个 templateEngine() 使用 Vue 服务器渲染器的函数：

const Vue = require('vue');
const express = require('express');
const { renderToString } = require('vue-server-renderer').createRenderer();
const { promisify } = require('util');

const app = express();
// Tell Express how to pre-process '.template' files using Vue server renderer.
app.engine('template', function templateEngine(filePath, options, callback) {
  (async function() {
    const content = await promisify(fs.readFile).call(fs, filePath, 'utf8');
    const app = new Vue({ template: content, data: options });
    const html = await renderToString(app);

    callback(null, html);
  })().catch(err => callback(err));
});
app.set('view engine', 'template');

app.get('*', (req, res) => {
  // Assuming the Vue code is in `views/test.template`
  res.render('test', { name: 'World' });
});

const server = await app.listen(3000);

// Example of using the server
const axios = require('axios');

const res = await axios.get('http://localhost:3000');
res.data; // '<h1 data-server-rendered="true">Hello, World</h1>'