Electron 配置 Vue Devtools

li.ianfei

已于 2022-10-18 18:45:29 修改

阅读量1.8k

点赞数 1

分类专栏： Electron 文章标签： vue.js electron javascript chrome devtools

于 2022-10-18 18:44:57 首次发布

本文链接：https://blog.csdn.net/lijianfei1989/article/details/127393474

版权

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

项目使用技术：Electron + Vue3 + Vite + TypeScript，官网配置方案测试无效，可能是我配置方式不对，网上找了些资料，记录留存

npm install electron-devtools-installer --save-dev

该项目开发者已暂停维护，不考虑

从Vue Devtools官网安装Chrome 或 Edge 扩展
在浏览器扩展管理页面，开启开发人员模式，获取扩展ID
通过 edge://version/ 可以查看浏览器的信息，复制用户配置路径，并打开对应文件夹。.
找到 Extensions目录，结合前面找到的扩展ID，找到对应的扩展程序目录
复制该目录下的程序文件到项目根目录（此处根据项目需求，多人协作项目建议直接放到项目根目录）
修改 Electron 启动文件 electron/main/index.js

引入session

import { session } from 'electron'

根据项目实际需求，引入 devtools

session.defaultSession.loadExtension(
  resolve(__dirname,'../../devtools/6.4.4_0')
)
win.webContents.openDevTools()

开源项目地址：Vue Devtools
此方法原理与方法二一致，编译打包，获取程序文件，项目中指定文件路径。
该方法项目方法二较为繁琐，不推荐，如有兴趣可参考文末链接。