如何将Vue 2含<!--vue-ssr-outlet-->的SSR模板插值迁移至Vue 3

Vue 2 中可通过页面模板实现带插值的 SSR 渲染，但 Vue 3 中 @vue/runtime-core 的 createRenderer 不再支持 template 配置项，官方文档也未覆盖该场景。以下是将 Vue 2 示例代码迁移至 Vue 3 的具体方案：

Vue 2 原有实现 #

页面模板 index.template.html #

<!DOCTYPE html>
<html>
  <head>
    <!-- 双大括号用于 HTML 转义插值 -->
    <title>{{ title }}</title>

    <!-- 三大括号用于不转义插值 -->
    {{{ meta }}}
  </head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>

Vue 2 渲染代码 node-test-vue2.js #

const Vue = require('vue'); // VUE 2

const template = require('fs').readFileSync('./index.template.html', 'utf-8');

const renderer = require('vue-server-renderer').createRenderer({
  template,
});

const context = {
    title: 'vue ssr',
    meta: `
        <meta name="keyword" content="vue,ssr">
        <meta name="description" content="vue ssr demo">
    `,
};

const options = {
  data: {
    date: new Date()
  },
  template: `<div>The date is: {{ date }}</div>`,
};

const app = new Vue(options);

(async () => {
  const html = await renderer.renderToString(app, context);
  console.log(html);
})();

Vue 3 迁移方案 #

Vue 3 SSR 需使用 @vue/server-renderer 提供的渲染能力，模板插值需手动处理（或借助模板引擎），以下是完整实现：

依赖安装 #

确保已安装 Vue 3 和官方 SSR 包：

npm install vue@3 @vue/server-renderer

Vue 3 渲染代码 node-test-vue3.js #

const { createApp } = require('vue');
const { renderToString } = require('@vue/server-renderer');
const fs = require('fs');

// 读取页面模板
const template = fs.readFileSync('./index.template.html', 'utf-8');

const context = {
    title: 'vue ssr',
    meta: `
        <meta name="keyword" content="vue,ssr">
        <meta name="description" content="vue ssr demo">
    `,
};

const options = {
  data() {
    return {
      date: new Date()
    };
  },
  template: `<div>The date is: {{ date }}</div>`,
};

(async () => {
  // 创建 Vue 应用实例
  const app = createApp(options);
  // 渲染组件得到应用 HTML
  const appHtml = await renderToString(app);

  // 处理模板插值：替换占位符
  let finalHtml = template
    // 处理 HTML 转义插值
    .replace(/{{\s*title\s*}}/g, (match) => {
      // 对内容进行 HTML 转义
      return context.title.replace(/&/g, '&amp;')
                          .replace(/</g, '&lt;')
                          .replace(/>/g, '&gt;')
                          .replace(/"/g, '&quot;');
    })
    // 处理不转义插值
    .replace(/{{{\s*meta\s*}}}/g, context.meta)
    // 替换应用内容占位符
    .replace(/<!--vue-ssr-outlet-->/g, appHtml);

  console.log(finalHtml);
})();

进阶优化（使用模板引擎） #

如果需要处理复杂的模板逻辑，可借助模板引擎（如 EJS）简化插值处理：

1. 安装 EJS：npm install ejs
2. 修改模板文件后缀为 .ejs，调整语法：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <%- meta %>
  </head>
  <body>
    <%- appHtml %>
  </body>
</html>

3. 修改渲染代码中的模板处理部分：

const ejs = require('ejs');
// ...
const finalHtml = ejs.render(template, {
  ...context,
  appHtml
});

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