electron+vue项目安装vue-devtools插件

你的名字 2022-12-15 12:43 227阅读 0赞

这里记录一下自己安装过程中遇到的问题：

1、首先需要安装vue-devtools，遇到了源码编译构建的时候的webpack,webpack-cli反复提示缺失的问题。

这个问题很烦:

a  git clone [https://github.com/vuejs/vue-devtools][https_github.com_vuejs_vue-devtools]

这一步其实有个巨坑，官方的代码默认是dev分支，我们需要切换到master分支，才能顺利的进行build。切换分支需要在命令行下执行如下指令即可：

git checkout master

截图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

如下文件系统显示所示默认分支没有shells目录，而这个目录下有chrome等目录，最后编译的结果就在这个目录下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1][]

切换到主分支，才会出现shells目录哦。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 2][]

b  cd vue-devtools  npm install

c  修改shells/chrome目录下的manifest.json，将如下的persistent的值由false->true

"background": {
        "scripts": [
          "build/background.js"
        ],
        "persistent": true
    },

d  npm run build

这一步会出现前面提到的一个特别恶心的webpack,webpack-cli互相依赖缺失的问题，提示没有webpack模块，然后全局安装webpack模块，npm install -g webpack，这时候运行webpack指令，会发现缺失webpack-cli，再次全局安装webpack-cli，npm install -g webpack-cli，这时候运行webpack-cli指令，又莫名其妙的提示缺失webpack模块。

原因就是webpack4.0的问题，解决办法就是安装指定版本的webpack：npm install -g webpack@3.6.0，而不是默认，默认会出现4以上版本，甚至5.1版本或者更高。

但是有的系统如果以前全局安装过webpack，还是会报这些相互依赖的问题，或者是环境变量导致的webpack,webpack-cli安装进了node目录，而以前有的webpack安装进了C:\\Users\\Administrator\\AppData\\Roaming\\npm这个目录。解决办法就是删除C:\\Users\\Administrator\\AppData\\Roaming\\npm目录下的webpack。

e 打开浏览器，进入更多程序->扩展程序，或者直接在浏览器上输入：chrome://extensions/进入，然后点击按钮“加载已解压的扩展程序”，选择vue-devtools/shells/chrome目录即可。这样，浏览器右上角会出现vue-devtools的图标。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 3][]

2、浏览器插件安装完成，普通的vue web项目可以在浏览器中出现vue-devtools插件，启动electron项目，还是不行，需要在代码中加入相关代码片段。

在src/main/index.dev.js中加入代码：BrowserWindow.addDevToolsExtention("/path/to/vue-devtools/shells/chrome")，其中BrowserWindow我们通过require("electron")来引入，在on ready部分加入插件代码，如下所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 4][]

安装vue-devtools插件到chrome浏览器中，不一定需要通过源码编译安装，可以通过下载推荐的crx文件，下载地址：[https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd][https_chrome.zzzmh.cn_info_token_nhdogjmejiglipccpnnnanhbledajbpd]，这种crx文件的扩展程序，需要手动拖入到Chrome浏览器的扩展程序界面这里。

最后，给出electron+vue项目启动之后，控制台的vue-devtools的样子：

![2020101618013069.png][]

切换到Vue这个面板的样子：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 5][]

这篇文章其实很想写webpack,webpack-cli的依赖相互缺失的问题的，但是已经有人提出解决这个问题了，就是版本对应上就可以了，但是我的问题可能还复杂一些，他还涉及了一个npm全局默认安装的目录C:\\Users\\Administrator\\AppData\\Roaming\\npm 中已经有了webpack老版本的问题。

再就是vue-devtools如果通过源码编译还会遇上一个很恶心的版本问题，就是官方dev,master的问题，我们需要切换到master分支才能进行很好的构建。

最后，如果是electron+Vue项目，还需要在代码中加入扩展插件的一句代码，但是涉及BrowserWindow引入的问题，所以严格来说是两句代码。

[https_github.com_vuejs_vue-devtools]: https://github.com/vuejs/vue-devtools
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: /images/20221123/705ca507a5bc42b08e917009e2e43e38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1]: /images/20221123/683453b3dd4745c094e63793330a61bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 2]: /images/20221123/83a3665a716f45f99d77c0e59680d349.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 3]: /images/20221123/70159f00b92741faaf9bb8d750b30be9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 4]: /images/20221123/47ff3fc482744b3b94e6c6b2ec83bf63.png
[https_chrome.zzzmh.cn_info_token_nhdogjmejiglipccpnnnanhbledajbpd]: https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd
[2020101618013069.png]: /images/20221123/01c9de99500e4dac89f91224f5f9a65b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 5]: /images/20221123/8f23a8ef2a7c4ecb8b1b8177d9fdf060.png