electron-vue项目添加vue-devtools调试插件

进入devtools官网下载zip压缩包

https://github.com/vuejs/vue-devtools

下载注意事项:需要选择Tags下载v5.1.1版本,否则会出现问题。

electron-vue项目添加vue-devtools调试插件_第1张图片

下载ZIP压缩包

electron-vue项目添加vue-devtools调试插件_第2张图片




下载好zip包

  1. 谷歌浏览器地址栏搜索:chrome://version/,找到【个人资料路径】,将zip包解压到它目录下。
  2. 进入vue-devtools-5.1.1文件夹
  3. 执行npm install或者cnpm install
  4. 修改\vue-devtools-5.1.1\shells\chrome\manifest.json文件,将"persistent": false改为"persistent": true
  5. 执行npm run build或者cnpm run build

electron-vue项目添加插件

BrowserWindow.addDevToolsExtension('C:/Users/adminName/ppData/Local/Google/Chrome/User Data/Default/vue-devtools-5.1.1')
// chrome文件夹所在的完整路径地址


浏览器添加插件

浏览器地址栏输入chrome://extensions转到扩展程序,启用“开发者模式”,点击“加载已解压的扩展程序”按钮,选择目录\vue-devtools-5.1.1\shells\下的chrome文件夹,插件添加成功!
electron-vue项目添加vue-devtools调试插件_第3张图片

你可能感兴趣的:(elecrton学习过程,vue-devtools,electron-vue)