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项目中时,需要编译安装。