Loading...

Electron+Vue项目安装vue-devtools插件

1. 安装vue-devtools

# 下载vue-devtools源码
git clone https://github.com/vuejs/vue-devtools

# 切换至master分支(因为官方默认是dev分支)
git checkout master

# 切换至vue-devtools目录
cd vue-devtools

# 安装依赖包
npm install 

2. 修改shells/chrome目录下的manifest.json

# 将persistent的值由false->true
"background": {
    "scripts": [
      "build/background.js"
    ],
    "persistent":  true
}, 

3. 编译

npm run build

4. 加载扩展

a. 打开chrome浏览器,进入更多程序→扩展程序,或者直接在浏览器上输入 chrome://extensions/ 进入

b. 点击【加载已解压的扩展程序】

c. 选择刚才vue-devtools目录下载chrome文件夹,即 vue-devtools/shells/chrome

d. 浏览器扩展中将出现 vue-devtools 扩展图标

5. 在electron项目用加载vue-devtools

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

在src/main/index.dev.js中加入如下代码:

BrowserWindow.addDevToolsExtention("/path/to/vue-devtools/shells/chrome")

其中BrowserWindow我们通过require("electron")来引入,在on ready部分加入插件代码,如下所示:

async function createWindow() {
  // 引入vue-devtools 扩展
  BrowserWindow.addDevToolsExtension('D:/Code/Others/vue-devtools/shells/chrome');
  // Create the browser window.
  const win = new BrowserWindow({
    frame: false,
    width: 800,
    height: 600,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
    }
  })

6. 特别说明

安装vue-devtools插件到chrome浏览器中,不一定需要通过源码编译安装,可以通过下载推荐的crx文件,下载地址: https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd ,这种crx文件的扩展程序,需要手动拖入到Chrome浏览器的扩展程序界面这里。但是用在Electron+Vue项目中时,需要编译安装。

7. 参考资料

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

  2. vue 调试程序的安装(谷歌浏览器chrome的vuejs devtools 插件的安装)

posted @ 2021-01-23 15:52  Penn00  阅读(2169)  评论(0编辑  收藏  举报