idea编辑前端代码使用vue-devtools跳转对应组件功能时报错解决

最新推荐文章于 2026-07-01 05:02:33 发布

原创最新推荐文章于 2026-07-01 05:02:33 发布 · 1.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端及Vue

当尝试使用Vue Devtools时，遇到错误提示，提示需设置EDITOR环境变量或在Vue项目配置中添加'editor'字段。通过查阅devtools官方文档和GitHub Issues，发现文档存在需要修改的地方。解决方案是安装'launch-editor-middleware'包，并在vue.config.js中添加相关配置，指定编辑器完整无空格的路径，例如：'D:/开发工具/idea/安装路径/IntelliJIDEA2021.3.1/bin/idea64.exe'。注意，编辑器路径若有空格可能导致问题，需要去除。

一、问题描述
在这里插入图片描述
点击红框按钮时，idea终端报错：To specify an editor, sepcify the EDITOR env variable or add "editor" field to your Vue project config.
二、问题分析
我是在devtools官方文档和devtools源码官方Issues两者结合下解决的此问题，去官方查看Issues也是最有效的解决问题的方法之一。
devtools官方文档：https://devtools.vuejs.org/guide/open-in-editor.html
devtools源码官方Issues：https://github.com/vuejs/devtools/issues
三、问题解决
devtools官方文档教程有需要改的地方，可结合devtools源码官方Issues去解决，这里不再赘述（感兴趣的可以自己查看对比），直接附上最终成功的解决办法。

npm install launch-editor-middleware
Vue CLI在vue.config.js添加var openInEditor = require('launch-editor-middleware')和 setup (app) { app.use('/__open-in-editor', openInEditor('D:/开发工具/idea/安装路径/IntelliJIDEA2021.3.1/bin/idea64.exe')) }
附图说明：
小插曲：之前idea64.exe的路径是有空格的，这样是万万不行的，需要把空格去掉之后才行。