可直接干预 Vue 编译过程，核心是替换或增强 @vue/compiler-core 的 parse→transform→generate 三阶段流水线，其中 transform 阶段最常用、最安全，支持逻辑注入、性能标记等构建时 AST 改造。

可以直接干预 Vue 编译过程，核心在于替换或增强 @vue/compiler-core 的标准编译流水线。这不是运行时 patch，而是构建阶段对 AST 的可控改造，适合做逻辑注入、性能标记、调试增强等场景。

理解编译三阶段与可插拔点

Vue3 编译分 parse → transform → generate 三个阶段，其中 transform 阶段是手动干预最常用、最安全的位置。它接收原始 AST，返回优化后的 AST，不涉及字符串解析或代码生成，类型清晰、副作用可控。

• parse：将模板字符串转为 AST；一般不建议修改，除非你要支持新语法（如自定义标签）
• transform：遍历 AST 节点，添加静态标记、处理指令、插入节点、重写表达式；这是注入逻辑的主战场
• generate：把 AST 转成渲染函数字符串；可改，但需谨慎——手写 JS 字符串易出错，且破坏 sourcemap

编写自定义 transform 插件

一个 transform 插件本质是一个函数，接收 AST 根节点和上下文对象，可同步修改节点属性或调用上下文方法插入新节点：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 使用 createTransformContext 或直接在 compile 选项中传入 transform 数组
• 通过 node.type === 'Element' 或 'Interpolation' 等判断节点类型
• 用 createObjectProperty、createCallExpression 等 helper 构造 AST 节点，避免手拼字符串
• 示例：为每个 自动注入点击埋点调用

在构建工具中接入自定义编译器

不同构建环境接入方式略有差异，但都围绕“覆盖默认 compiler”这一目标：

• Vite：在 vite.config.ts 中配置 vue.compilerOptions，传入自定义 parse / transform / generate 函数
• Vue CLI：通过 vue.config.js 的 configureWebpack.chainWebpack 修改 @vue/compiler-sfc 的 options
• 浏览器内编译（如开发 demo）：直接 import compile 函数，传入含自定义 transform 的 options 对象

注入代码的典型模式

实际注入不是往 render 函数里塞字符串，而是通过 AST 操作让逻辑自然融入：

• 属性注入：给元素节点的 props 数组 push 一个 v-on:click 对象，值为 createCallExpression('trackClick', [...])
• 节点包裹：把
  {{ msg }}
  改为
  {{ msg }}
  （需同步注册组件）
• 表达式重写：将 {{ count + 1 }} 替换为 {{ __trackExpr(() => count + 1, 'count+1') }}，实现表达式级监控

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！