Vue开发者工具： Vue.js devtools

• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

一. 安装 Vue.js devtools

1. 打开chrome浏览器右上角工具栏
2. 在更多工具选项，选择扩展程序,进入扩展列表页面
3. 在扩展列表页面点击左上角列表图标，在弹出抽屉底部，点击打开chrome 网上应用店
4. 在chrome 网上应用店，搜索Vue.js devtools,点击进行安装

   如果进不去chrome 网上应用店，用VPN科学上网。

5. 启用Vue.js devtools,并允许访问文件网址
6. 安装启用后，执行当前Vue项目，F12打开控制台使用Vue devtools开发者工具

• 如果是本地项目，除了浏览器右上角的vue图标会高亮显示外，控制台已有vue选项提供开发调试
• 如果是线上项目，浏览器右上角的vue图标会高亮显示，但控制台是没有vue选项进行调试

二. 使用Vue.js devtools过程中可能出现的问题

1. 安装devtools后进行项目开发，发现浏览器右上角Vue Logo已点亮，控制台却没有vue选项

   • 解决方法：

   new Vue({
           el: '#app',
           // ……
           devtools: 1, // Vue Devtools控制台没有vue选项时手动配置
   })
   

2. 点开控制台Vue，选择Component，点击open-in-editor文件按钮，自动用编辑器打开对应文件，却无法成功，查看控制台Console已经输出File src\……\…….vue opened in editor

   • 解决方法：
     1. 安装 launch-editor-middleware：
        • npm install -D launch-editor-middleware
     2. vue.config.js 配置 launch-editor-middleware
        • vue-cli3( vue.config.js )

        const launchEditorMiddleware = require('launch-editor-middleware')
        // ……
        devServer: {
            before (app, server) {
                // launch editor support.
                // this works with vue-devtools & @vue/cli-overlay
                app.use('/__open-in-editor', launchEditorMiddleware(() => console.log(
                        `To specify an editor, specify the EDITOR env variable or ` +
                        `add "editor" field to your Vue project config.\n`
                )))
            }
        },
        // ……
        

        vue-cli3的launchEditorMiddleware可以指定启动编辑器：app.use('/__open-in-editor', launchEditorMiddleware('code')), code参数对应VSCode编辑器 具体看参考文档open-in-editor

        • vue-cli2( webpack.dev.conf.js )
          • 与vue-cli3同样的launchEditorMiddleware配置
          • 但，vue-cli2无法指定启动编辑器，默认是vscode，如果要指定打开其他编辑器，需要另外配置
          • 在根目录添加.env.delelopment文件,配置内容为：EDITOR=code

            # .env.development
            # code -> vscode
            EDITOR=code
            

3. 控制台Vue栏点击open-in-editor文件按钮，自动用编辑器打开对应文件，却无法成功，终端报错以下相关提示：

   Could not open ArticleAdd.vue in the editor.
   The editor process exited with an error: (code 1).
   'code' 不是内部或外部命令，也不是可运行的程序或批处理文件。
   

   To specify an editor, specify the EDITOR env variable or add "editor" field to your Vue project config.
   系统找不到指定的路径。
   Could not open ArticleAdd.vue in the editor.
   

   • 参考文档“在编辑器中打开”按钮不起作用
   • 解决方法：

     const openInEditor = require('launch-editor-middleware');
     module.exports = {
         devServer: {
             setup (app) {
                 app.use('/__open-in-editor', openInEditor('code'))
             }
         }
     }