electron-vue中Unable to install `vue-devtools`的报错问题

最新推荐文章于 2025-08-16 16:58:03 发布

转载最新推荐文章于 2025-08-16 16:58:03 发布 · 4.2k 阅读

8 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/william1994/p/13894822.html

文章标签：

#vue.js #electron #前端

解决Electron环境下Vue-Devtools加载失败的问题。通过npm安装Vue-Devtools并手动加载到Electron应用中。

由于网络的问题，electron运行的时候加载vue-devtools失败。 Unable to install vue-devtools 。从日志里看retry了四次都timeout了。

找了一圈，这个也没有淘宝镜像等国内镜像。不过后来按网上找了个方法，成功加载了最新的版本。

对于开发来讲，好的调试工具太重要了。

先 npm install vue-devtools --save-dev

然后把ready事件里面注释掉5行，再加上一行手动加载的。

最终src/main/index.dev.js里面修改后的内容如下（所有内容）：

 import {  BrowserWindow } from 'electron'; //添加部分
/* eslint-disable */

// Install `electron-debug` with `devtron`
require('electron-debug')({ showDevTools: true })

// Install `vue-devtools`
require('electron').app.on('ready', () => {
  let installExtension = require('electron-devtools-installer')
  //以下为注释掉的部分
  // installExtension.default(installExtension.VUEJS_DEVTOOLS)
  //   .then(() => {})
  //   .catch(err => {
  //     console.log('Unable to install `vue-devtools`: \n', err)
  //   })
//添加部分，需要先import
  BrowserWindow.addDevToolsExtension('node_modules/vue-devtools/vender')  //手动加载vue-devtools，前提是 npm install vue-devtools --save-dev
})

// Require `main` process to boot app
require('./index')