记一次 Electron 安装 vue-devtools插件踩坑

前言：vue-devtools 是vue开发调试的一大利器。

通常我们是使用vue+electron的模式进行开发，而在平时vue开发中，我们通常使用vue-devtools进程代码的调试，那么在electron中，我们就要想办法去加载vue-devtools这个插件。

下载源码&构建

1. 到GitHub 仓库下载源码压缩包，这里我选择5.1.1这个版本

2. 解压进入devtools-5.1.1项目目录，并安装依赖

npm i

3. 依赖安装成功后，进行打包

npm run build

集成到electron 项目

在打包完成后复制 devtools-5.1.1/shells/chrome 目录下的所有文件到 electron项目根目录下面

安装

下面就可以在electron 项目中的 src/main/index.dev.js 文件中，利用 BrowserWindow.addDevToolsExtension(url) 引入插件。
整个文件代码如下：

import { BrowserWindow } from 'electron';
const path = require('path');

require('electron').app.on('ready', () => {
    // 安装vue-devtools
    BrowserWindow.addDevToolsExtension(path.resolve(__dirname, '../../.devtools'));
})

require('./index')

坑

查看我目前的Electron版本

process.versions

乍一看 addDevToolsExtension 是个过期的函数

最后通过强大的chatGPT得到答案

const path = require('path');
import { session } from 'electron';
require('electron').app.on('ready', () => {
    session.defaultSession.loadExtension(path.resolve(__dirname, '../../.devtools'));
})

require('./index')

展示 showtime