Vue Devtools “Open in Editor” 配置教程（适用于 VSCode 等主流编辑器）

📌 什么是 “Open in Editor”

Vue Devtools 中的 “Open in Editor” 功能允许你在开发过程中，点击组件树中的某个组件路径时自动用你喜欢的代码编辑器打开该文件。

示例场景👇：

在 Devtools 中看到组件 <MyComponent>，点击路径：

/src/components/MyComponent.vue

➡️ VSCode 自动打开这个文件。

✅ 准备条件

• 已安装 Vue Devtools
• 使用现代 Vue 项目构建工具（Vite / Vue CLI / Webpack）
• 本地开发环境
• 已安装代码编辑器（如 VSCode）
• Node.js 环境

🧭 配置步骤一：安装并配置 Editor Middleware（用于桥接浏览器和本地编辑器）

1. 使用 vite 启动的 Vue 项目

方式一：自动支持（推荐）

如果你使用的是 Vite + vite-plugin-vue, 它自动支持 open in editor 功能。确保如下：

npm install vite-plugin-vue2 -D # Vue2 项目
# 或
npm install @vitejs/plugin-vue -D # Vue3 项目

然后在 vite.config.ts 中配置：

// vite.config.ts
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()]
}

默认情况下，Vite 会通过 /__open-in-editor 中间件打开文件。

👉 确保你是通过 npm run dev 或 vite 启动，而不是 nginx 或 docker 中的构建产物。

方式二：手动配置中间件（更灵活）

如果你使用的是自定义服务器或希望更强的控制，可以用这个中间件库：

npm install launch-editor-middleware --save-dev

然后在 vite.config.ts 里添加如下：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import launchEditorMiddleware from 'launch-editor-middleware'

export default defineConfig({
  plugins: [vue()],
  server: {
    middlewareMode: true, // 启用中间件模式
    setupMiddlewares: (middlewares, devServer) => {
      middlewares.use('/__open-in-editor', launchEditorMiddleware())
      return middlewares
    }
  }
})

2. Vue CLI 项目

Vue CLI 内置支持 “open in editor”。

只要你是通过：

npm run serve

启动项目，点击 Devtools 中的路径就可以打开文件（默认打开 VSCode）。如果没有反应，请参考后文环境变量设置。

🧭 配置步骤二：设置默认打开的编辑器（以 VSCode 为例）

方法一：环境变量 BROWSER 或 EDITOR

在项目根目录下创建 .env.local 或在系统环境变量中设置：

EDITOR=code

方法二：全局设置系统环境变量（Windows/macOS/Linux）

Windows（PowerShell）

$env:EDITOR="code"

或永久添加：

[System.Environment]::SetEnvironmentVariable("EDITOR", "code", "User")

macOS / Linux（zsh / bash）

export EDITOR="code"

写入 .bashrc / .zshrc 中。

支持的编辑器值（部分示例）

🧰 配合使用的插件推荐

如果你使用 VSCode，建议安装：

• Vue - Official
• Vetur（仅 Vue2）
• Path Intellisense

🧪 常见问题排查

❓点击没反应？

• 是否本地运行服务？（部署后是无效的）
• 是否 Devtools 连接的是本地页面？
• 是否 Devtools 是最新版本？（推荐使用独立版或 Chrome 插件最新版）
• 是否设置了 EDITOR=code 环境变量？
• 是否使用 Docker 容器？容器内启动的服务是无法打开宿主机器的 VSCode 的！

❓想用 WebStorm 或其它编辑器？

EDITOR=webstorm

同时确保你已经配置好 webstorm 命令到全局 PATH。

📦 Docker 环境下的限制说明

Docker 环境内运行的服务是 无法直接操作宿主机器的编辑器。你可以：

• 本地运行开发服务
• 使用 docker run -v 映射代码并在宿主机器运行 vite 或 npm run serve

✅ 实际效果预览

启动项目 → 打开浏览器调试 Vue 页面 → 打开 Vue Devtools → 点击组件路径：

➡️ 立刻打开 VSCode，精准跳转到组件源码。

🧭 总结

📚 参考资料

• https://cn.vite.dev/guide/
• https://devtools.vuejs.org/

如果你正在做大型项目开发或维护组件库，我建议你一定开启这个功能，在 Devtools 中追踪源码效率会提高一个维度。