Vue编译器转换插件仅介入Transform阶段，对已有AST进行语义增强或结构改写，不参与Parse和Generate；需导出接收node与context的函数，通过context.addHelper引入辅助函数、遍历节点匹配指令并注入逻辑，修改直接作用于原AST。
Vue 编译器转换插件开发，核心在于介入编译流程的 transform 阶段，对解析生成的 AST 进行语义增强或结构改写，从而影响最终渲染函数的行为。它不是独立运行的工具，而是嵌入在 SFC 编译链路中、与 Vue 官方编译器深度协作的扩展模块。
明确插件作用位置：只管 AST 转换，不管解析和生成
Vue 编译器（@vue/compiler-core）将模板编译分为三步：Parse → Transform → Generate。转换插件只参与中间的 Transform 阶段——此时已有合法 AST，但尚未注入运行时语义或优化标记。
- 不负责把字符串变成 AST（那是 parser 的事）
- 不负责把 AST 拼成 render 函数代码（那是 codegen 的事）
- 只做一件事：遍历节点，读取上下文，修改节点属性、插入新节点、打标记、提取逻辑
编写一个基础转换插件：以添加自定义指令处理为例
比如你想让 v-log 指令在渲染前自动打印节点信息，需注册一个 transform 插件：
- 导出一个函数，接收 AST 根节点和上下文对象（
node, context） - 用
context.addHelper引入运行时辅助函数（如console.log包装） - 遍历子节点，匹配含
v-log的元素，为其生成对应的createVNode前置逻辑 - 通过
node.codegenNode或node.patchFlag注入额外行为
关键点：插件返回的是“副作用”，不是新 AST；所有修改直接作用于原 AST 节点树。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
接入方式取决于构建环境
不同工具链调用插件的方式不同，但本质都是把你的函数传给 compiler 的 transform 流程：
-
Vite：在
@vitejs/plugin-vue的template.compileOptions.transform中传入数组 -
Webpack + vue-loader：通过
compilerOptions.modules或自定义 loader 配置传递 -
直接调用 compiler：用
compileTemplate({ source, transform: [yourPlugin] })
注意：插件必须与当前 Vue 版本的 AST 节点结构兼容（Vue 2 与 Vue 3 的 ElementNode 字段差异较大）。
调试与验证要点
转换插件不易肉眼观察效果，建议结合以下方式确认是否生效：
- 在插件内部
console.log(node)，配合 Vite 的buildStart断点查看 AST 变化 - 检查最终生成的 render 函数字符串，搜索你注入的标识符（如
_logNode） - 利用
@vue/compiler-core提供的generate结果反推 AST 修改是否被采纳 - 避免修改不可变字段（如
node.type），优先使用node.props或node.codegenNode扩展行为
