Electron+Vite+Vue3如何添加Vue.js devtools开发者工具扩展

前言

Electron的开发者工具扩展electron-devtools-installer早已不更新，在新版本Electron项目中运行会报类似错误提示：

Version of Electron: 18.0.2 does not match required range >=1.2.1 for extension ljjemllljcmogpfapbkkighbhhppjdbg

此扩展目前最后更新于2021-04-18，已经无人维护更新，那么只能手动加载此扩展。

获取Vue.js devtools开发者工具扩展

Chrome浏览器扩展商店需要魔法才能打开，因此推荐使用Microsoft Edge浏览器下载扩展。这两个浏览器内核相同，扩展通用。

1. 先进入Microsoft Edge浏览器扩展商店搜索Vue.js devtools，找到之后安装此扩展。
2. Microsoft Edge的扩展安装地址Windows默认为：

C:\Users\你的用户名\AppData\Local\Microsoft\Edge\User Data\Default\Extensions

3. 扩展目录中每个扩展的名称都是一串字符串，如果是多个文件则一个一个进入查看扩展版本号即可确定哪个是vue开发者扩展。
4. 把此扩展复制移动到一个任意目录待用。

Windows系统下手动安装vue扩展

1. main.js引入shell模块

import { shell } from 'electron'

2. 在app.whenReady().then(createWindow)之后加载扩展

# vue扩展地址则为上步复制的扩展地址
app
  .whenReady()
  .then(createWindow)
  .then(async () => {
    await session.defaultSession.loadExtension('C:/devSoft/vueDevtools/nhdogjmejiglipccpnnnanhbledajbpd/6.1.4_0')
  })

关于macOS系统

请直接参考Electron的官方文档

参考：开发者工具扩展 | Electron (electronjs.org)

扩展更新

如果要更新此扩展则进行相同步骤，替换相应版本路径即可。