如何从AST生成Vue模板代码？求类似@babel/generator的方案

1. 基于Vue官方编译器实现 #

@vue/compiler-sfc本身提供了拆分SFC各部分AST的能力，你可以分别生成模板、脚本、样式代码后拼接成完整的Vue文件：

import { parse, generate as generateTemplate, compileScript } from '@vue/compiler-sfc'
import templateStr from './components/Script.vue?raw'

const { descriptor } = parse(templateStr)

// 生成template部分代码
const templateCode = descriptor.template 
  ? `<template>${generateTemplate(descriptor.template.ast).code}</template>` 
  : ''

// 生成script部分代码
const scriptCode = descriptor.script 
  ? `<script>${compileScript(descriptor).content}</script>` 
  : ''

// 生成style部分代码
const styleCodes = descriptor.styles
  .map(style => `<style${style.scoped ? ' scoped' : ''}>${style.content}</style>`)
  .join('\n')

// 拼接为完整Vue文件代码
const output = [templateCode, scriptCode, styleCodes].filter(Boolean).join('\n')

说明：generateTemplate负责转换模板AST为HTML字符串，compileScript会处理脚本的AST并生成可执行的脚本内容，样式部分可直接复用原始内容（若需处理样式AST，可结合@vue/compiler-core的相关方法）。

2. 社区工具适配方案 #

• vue-eslint-parser：该工具可解析Vue SFC生成标准ESTree兼容的AST，你可以结合@babel/generator来生成代码，但需要针对Vue特有的节点类型（如模板节点）做额外的转换逻辑。
• recast：通用AST处理工具，支持自定义节点类型映射，只要将Vue AST节点转换为recast支持的结构，即可生成对应代码。

3. 自定义简易生成函数 #

如果需求场景简单，可自行实现AST遍历逻辑，根据节点类型拼接代码：

function generateVueAST(node) {
  if (node.type === 'Element') {
    // 处理元素节点的属性
    const attrs = node.props.map(prop => {
      if (prop.type === 'Attribute') {
        return `${prop.name}="${prop.value?.content || ''}"`
      }
      return ''
    }).filter(Boolean).join(' ')
    
    // 处理子节点
    const children = node.children.map(child => generateVueAST(child)).join('')
    
    return `<${node.tag}${attrs ? ' ' + attrs : ''}>${children}</${node.tag}>`
  } else if (node.type === 'Text') {
    return node.content
  } else if (node.type === 'Expression') {
    return `{{${generateVueAST(node.content)}}}`
  }
  // 按需扩展其他节点类型（如指令、注释等）
  return ''
}

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