Vue 开发工具 - 无法使用“在编辑器中打开”按钮。如何解决这个问题？

Posted 2023-04-13

【中文标题】Vue 开发工具 - 无法使用“在编辑器中打开”按钮。如何解决这个问题？

【英文标题】：Vue Dev Tools - does not working "Open in Editor" button. How to fix this?

【发布时间】：2019-03-16 12:20:01

【问题描述】：

我正在尝试从教程中设置此功能： https://github.com/vuejs/vue-devtools/blob/master/docs/open-in-editor.md

但出现错误

"C:\Users\User\AppData\Local\Programs\Microsoft" не является внутренней или внешней, исполняемой программой или пакетным файлом.
Could not open LeadsEdit.vue in the editor.
The editor process exited with an error: (code 1).

To specify an editor, sepcify the EDITOR env variable or add "editor" field to your Vue project config.

在我的 vue.config.js 中（基于 vue cli 3.0 的项目）

const openInEditor = require('launch-editor-middleware');

module.exports = 
    configureWebpack: 
        devtool: 'source-map',
    ,
    devServer: 
        before(app) 
            app.use('/__open-in-editor', openInEditor('code'))
        
    

UPD。如果没有此代码，问题仍然存在。 UPD2。

我正在尝试在 .env 文件中设置 EDITOR 变量

VUE_APP_EDITOR=/c/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe

或者使用 vue.config.js

const openInEditor = require('launch-editor-middleware');

module.exports = 
    configureWebpack: 
        devtool: 'source-map',
    ,
    devServer: 
        before(app) 
            app.use('/__open-in-editor', openInEditor('/c/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe'))
        
    

但问题依然存在

什么可能导致这个问题？ 我该如何解决这个错误？

【问题讨论】：

如果您使用的是 Vue-CLI 生成的项目，“在编辑器中打开”应该已经可以开箱即用（无需任何配置）。我正在使用 vue-devtools 5.0.0 beta 3、VS Code 1.28.0、Chrome 69 和 macOS Mojave。

【参考方案1】：

似乎开发工具正在尝试打开编辑器可执行文件C:\Users\User\AppData\Local\Programs\Microsoft，这很可能是错误的。 Windows 10 上的默认安装位置是（据我所知）C:\Users\User\AppData\Local\Programs\Microsoft VS Code\Code.exe。

launch-editor 尝试从当前运行的进程中查找编辑器并回退到环境变量EDITOR 和VISUAL（请参阅https://github.com/yyx990803/launch-editor#why），因此您可以将EDITOR env var 设置为正确的路径。

可能，编辑器配置周围缺少引号，因此它在第一个空格处被截断。我真的不知道路径来自哪里，要么你通过环境变量配置它，要么在你的 vue 项目配置中。

根据您更新的问题中的信息，您可以试试这个：

我不知道变量名VUE_APP_EDITOR从哪里来，但我猜应该是EDITOR。把它改成EDITOR，看看会发生什么

您使用的路径看起来不对（即不像 Windows 路径）。请改用c:/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe。 例如：

    app.use('/__open-in-editor', openInEditor('c:/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe'))

您可以通过启动cmd shell 并输入路径来测试路径是否正确。如果正确，VS Code 应该会打开。如果没有，它会告诉你找不到路径。

也看看这个，还有更多关于如何集成vue devtools & VS Code：https://gist.github.com/moreta/d3989686b6a1f2416b5802cac8df16b4

【讨论】：

感谢您的回答。我正在尝试在 .env 文件或使用 vue.config.js 设置 EDITOR 变量但问题仍然存在