【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器_vite-plugin-vue-devtools插件

🔧 使用 vueDevTools 插件并修改默认打开编辑器

一文搞懂 vite-plugin-vue-devtools 的使用方式与如何设置默认打开编辑器（包括 VSCode、WebStorm，甚至 Trae）。

---

🌟 什么是 vueDevTools？

vite-plugin-vue-devtools 是一个为 Vite + Vue 项目提供开发时调试能力的插件，它能在浏览器中实时显示组件结构、props、emits 等信息，并支持点击组件源码位置打开本地编辑器，非常适合调试大型 Vue 项目。

---

🚀 快速安装与使用

1️⃣ 安装插件

npm install vite-plugin-vue-devtools -D

2️⃣ 注册插件到 vite.config.ts

import { defineConfig } from \'vite\'import vue from \'@vitejs/plugin-vue\'import { vueDevTools } from \'vite-plugin-vue-devtools\'export default defineConfig({ plugins: [ vue(), vueDevTools({ launchEditor: \'code\' // 默认使用 VSCode }), ],})

---

🛠️ 如何修改默认打开的编辑器？

vueDevTools 内部使用了 launch-editor 库，它支持多种主流编辑器打开代码行列。

🧩 支持的常见编辑器值如下：

编辑器名 值（launchEditor） VS Code \'code\' WebStorm \'webstorm\' PhpStorm \'phpstorm\' Sublime Text \'sublime\' Atom \'atom\' VSCodium \'vscodium\' Trae（自定义） \'trae\'（需配置环境变量或路径）

---

🧪 自定义编辑器：以 Trae 为例

假如你使用的是自定义编辑器 Trae，你希望点击 DevTools 中的组件位置时能自动用 Trae 打开并跳到对应的行列：

✅ 方法一：将 trae 添加到系统环境变量

1. 找到 Trae 安装路径，例如：

   C:\\Users\\你\\AppData\\Local\\Programs\\Trae\\Trae.exe

2. 添加该路径到系统环境变量 PATH。

3. 测试是否配置成功：

   trae --version

4. 修改 vite.config.ts：

   vueDevTools({ launchEditor: \'trae\'})

---

✅ 方法二：直接写 Trae 的完整路径

如果你不想配置环境变量，也可以直接填写 Trae 可执行文件的完整路径：

vueDevTools({ launchEditor: \'C:/Users/你/AppData/Local/Programs/Trae/Trae.exe\'})

---

🧩 vueDevTools 全部配置项参考

vueDevTools({ componentGlobs: [\'src/**/*.{vue,ts,js}\'], // 匹配组件路径 launchEditor: \'code\',  // 编辑器 enable: true, // 是否启用 devtoolsUIRoute: \'/__devtools\',  // 调试界面路由 componentPreviewEnabled: true, // 是否显示预览 injectInDev: true, // 只在开发模式注入 componentMetadata: true  // 显示组件信息})

---

🖼️ 效果预览

配置好之后，运行开发环境：

npm run dev

访问页面时，按下 Ctrl + Shift + D（默认快捷键）即可打开 DevTools 面板，点击组件名称旁的文件路径，会自动使用你配置的编辑器打开并跳转到相应的行列！

---

🧠 小结

功能 配置项 默认值 启用插件 enable true 设置编辑器 launchEditor \'code\' 自定义路径 launchEditor: \'xxx.exe\' ✔️ 调试面板路由 devtoolsUIRoute \'/__devtools\' 快捷键 Ctrl + Shift + D 可自定义

---

📌 结语

vueDevTools 插件极大提升了 Vue 项目的开发体验，尤其是组件结构复杂时，调试与跳转变得前所未有地丝滑。无论你用的是 VSCode、WebStorm，还是小众编辑器 Trae，只要配置得当，都能享受同样的便捷体验！

问题-这个模式会有行列跳转不到的问题，可以看这篇文章解决

【前端】【Vue DevTools】Vue DevTools 进阶：用 Trae / Cursor 替换 VSCode 打开文件（跳转行列无误）