Step 1:Chrome浏览器添加vue-devtools插件

① 下载vue-devtools源码压缩包:https://github.com/vuejs/vue-devtools在这里插入图片描述
② 浏览器地址栏输入chrome:version转到关于版本,查看“个人资料路径”(浏览器配置文件的存放位置),将zip中的vue-devtools-dev文件夹解压到该路径下

③ Git Bash进入vue-devtools-dev工程目录,安装依赖:

$ npm install

安装完成后编译程序:

$ npm run build

编译成功后,在目录\vue-devtools-dev\shells\chrome\下找到manifest.json文件,将"persistent": false改为"persistent": true
在这里插入图片描述
④ 浏览器地址栏输入chrome://extensions转到扩展程序,启用“开发者模式”,点击“加载已解压的扩展程序”按钮,选择目录\vue-devtools-dev\shells\下的chrome文件夹,插件添加成功!
在这里插入图片描述

Step 2:electron-vue项目添加vue-devtools插件

① 在项目目录\ev-demo\src\main\下找到index.dev.js文件,添加2行代码:

const { BrowserWindow } = require('electron')
BrowserWindow.addDevToolsExtension('C:/Users/89693/AppData/Local/Google/Chrome/User Data/Default/vue-devtools-dev/shells/chrome')
// chrome文件夹所在的完整路径地址

在这里插入图片描述
② 运行项目,控制台出现Vue标签,即可使用vue-devtools啦!
在这里插入图片描述


以上。

Logo

前往低代码交流专区

更多推荐