@bcdesign/source-loc-vite

一个 Vite 插件，在开发期向 Vue SFC 元素注入源码位置元数据，方便可视化编辑工具把渲染出来的 DOM 节点映射回源文件。

对 <template> 中的每个元素，插件会添加：

• data-source-loc="<相对文件路径>:<行>:<列>"

同时支持 Vue 3 和 Vue 2：用户项目根据 Vue 版本配合 @vitejs/plugin-vue 或 @vitejs/plugin-vue2 使用；本插件内部对两种版本都使用同一套 @vue/compiler-sfc + @vue/compiler-dom 管道处理，不依赖 vue-template-compiler。注入仅在开发模式（vite serve）生效，生产构建不受影响。

安装

npm install -D @bcdesign/source-loc-vite

使用

Vue 3

// vite.config.js
import vue from '@vitejs/plugin-vue'
import sourceLoc from '@bcdesign/source-loc-vite'

export default {
  plugins: [
    sourceLoc(),
    vue(),
  ],
}

Vue 2

// vite.config.js
import vue2 from '@vitejs/plugin-vue2'
import sourceLoc from '@bcdesign/source-loc-vite'

export default {
  plugins: [
    sourceLoc(),
    vue2(),
  ],
}

本插件会通过查找 Vite 配置中是否存在 name 为 vite:vue2 的插件来自动识别 Vue 2 项目，无需额外配置。两种版本都走同一套 @vue/compiler-sfc + @vue/compiler-dom 管道。

插件以 enforce: 'pre' 运行，必须注册在 @vitejs/plugin-vue（或 @vitejs/plugin-vue2）之前，否则 template AST 的行列偏移量会不准确。

说明

• 只处理 .vue 文件。
• 内置标签会被跳过：template、slot、transition、transition-group、keep-alive、teleport、suspense。
• 当 NODE_ENV === 'production' 时插件不做任何事。