Vue3 SSR场景下获取含v-if等指令的完整原始模板的解决方案咨询

以下是经过验证的可落地实现方案，所有方案均支持保留v-if/v-for等Vue原生指令、自定义指令、插槽等原始模板语法：

• 方案1：构建阶段预提取（推荐，准确率100%）
  由于.vue单文件组件在被编译成JS代码前本身就保留了完整原始模板，你可以通过自定义构建插件在SFC编译环节拦截提取模板内容，支持Vite、Rollup、Webpack等所有主流构建工具。
  以Vite插件为例，示例代码如下：

// vite-plugin-extract-sfc-template.js
const extractTemplateMap = new Map()
export default function extractSfcTemplate() {
  return {
    name: 'extract-sfc-template',
    transform(code, id) {
      // 仅处理.vue后缀的单文件组件
      if (id.endsWith('.vue')) {
        // 正则匹配<template>标签内的原始内容
        const templateMatch = code.match(/<template>([\s\S]*?)<\/template>/)
        if (templateMatch) {
          extractTemplateMap.set(id, templateMatch[1].trim())
        }
      }
      return code
    },
    // 构建结束后将全量模板输出到JSON文件
    closeBundle() {
      const fs = require('fs')
      fs.writeFileSync('./all-sfc-templates.json', JSON.stringify(Object.fromEntries(extractTemplateMap), null, 2))
    }
  }
}

将该插件注册到vite.config.js的plugins数组后，每次构建/启动开发服务都会自动导出全量组件原始模板。

• 方案2：开发环境运行时动态获取
  如果不想修改构建配置，可在开发环境下通过组件实例直接读取模板，该方案依赖Vue默认开发配置保留的template配置项，生产环境默认不可用。示例用法如下：

// 获取根组件原始模板
const rootTemplate = app._instance.$options.template
// 获取指定名称的子组件原始模板
const targetCompTemplate = app._instance.$children.find(item => item.$options.name === '你的组件name属性值').$options.template

该方案仅支持单独获取单个组件的模板，无法直接拿到拼接完成的全应用模板。

• 方案3：拼接生成全应用级原始模板
  如果需要得到完整的应用级拼接模板，可结合方案1导出的所有单组件模板，再解析SFC中script块的components组件引入关系，递归将组件标签替换为对应子组件的原始模板，即可得到包含所有层级结构、完整保留指令的全量原始模板。

注意：生产环境构建默认会将模板预编译为render函数，删除原始模板字符串减小产物体积，所有模板提取操作都需要在开发环境或构建环节执行。如果必须在生产环境获取模板，需要修改构建配置关闭模板编译优化，强制保留template字段，该操作会显著增大产物体积，非必要不推荐。

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