@havocrao/vite-plugin-vue-inspector-copy

开发期 Vue Inspector 增强：开启 Inspector 后点击组件，把组件名、源码位置和父组件链复制到剪贴板。

使用

import vue from '@vitejs/plugin-vue';
import vueInspectorCopy from '@havocrao/vite-plugin-vue-inspector-copy';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [vue(), vueInspectorCopy()],
});

默认使用 Alt/Option + Shift 切换 Inspector。插件及浏览器 runtime 只在 Vite dev server 中生效，生产构建不会注入。

vueInspectorCopy({
  copy: {
    direction: 'root-to-leaf',
    log: false,
  },
  devtools: {
    componentInspector: {
      toggleComboKey: 'control-shift',
    },
  },
});

实现依赖 Vue 和 vite-plugin-vue-inspector 的开发期内部字段。升级 Vue DevTools 后需要回归验证 Inspector 点击复制行为。

解析和打开组件链

包内 CLI 可以解析 Inspector 复制出的文本、定位项目文件，并在 TUI 中选择后交给编辑器命令打开。它不假设固定的 monorepo 目录：优先按当前目录和 Git 根解析，再用 Git 文件列表做路径后缀匹配。

安装后可以直接调用包提供的命令：

vue-inspector-copy --cmd "buddycn -g" --loc --text "Button  src/components/Button.vue:12:3"

也可以从管道或文件读取：

pbpaste | vue-inspector-copy --cmd "code -g" --loc
vue-inspector-copy --from chain.txt --cmd "code -g" --loc

主要参数：

• --text、--from 或 stdin：接收 Inspector 链文本。
• --cmd：编辑器打开命令，默认 code。
• --loc：把行列拼成 file:line:column；失败后自动回退到纯文件路径。
• --root：显式指定 Git/项目根目录。
• --entry、--depth：从指定入口继续展开本地 import 依赖。
• --print：只打印解析结果，用于调试和自动化验证。

当前仓库的 pnpm --dir apps/web tui 脚本也是该命令的快捷入口。