npm run dev or yarn run dev error : Unable to install `vue-devtools`:

[xiaomizhou66]

λ yarn run dev
yarn run v1.13.0
warning package.json: No license field
$ node .electron-vue/dev-runner.js
         ___                      __
   __   /\_ \       __     ___   /\ \__    _ __    ___     ___              __  __  __  __     __
 / ,.`\ \//\ \    / ,.`\  /'___\ \ \ ,_\  /\` __\ / __`\ /' _ `\   _______ /\ \/\ \/\ \/\ \  / ,.`\
/\  __/   \_\ \_ /\  __/ /\ \__/  \ \ \/  \ \ \/ /\ \_\ \/\ \/\ \ /\______\\ \ \/ |\ \ \_\ \/\  __/
\ \____\  /\____\\ \____\\ \____\  \ \ \_  \ \_\ \ \____/\ \_\ \_\\/______/ \ \___/ \ \____/\ \____\
 \/____/  \/____/ \/____/ \/____/   \ \__\  \/_/  \/___/  \/_/\/_/           \/__/   \/___/  \/____/
                                     \/__/
  getting ready...

┏ Main Process ---------------

  compiling...

┗ ----------------------------

┏ Renderer Process -----------

  Hash: 859389147a286429ea3b
  Version: webpack 4.30.0
  Time: 2438ms
  Built at: 2019-04-23 12:28:47
                  Asset       Size    Chunks             Chunk Names
  imgs/logo--assets.png   60.4 KiB            [emitted]
             index.html  412 bytes            [emitted]
            renderer.js   1.76 MiB  renderer  [emitted]  renderer
  Entrypoint renderer = renderer.js
  [1] multi (webpack)-dev-server/client?http://localhost ./.electron-vue/dev-client ./src/renderer/main.js 52 bytes {renderer} [built]
  [./.electron-vue/dev-client.js] 731 bytes {renderer} [built]
  [./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {renderer} [built]
  [./node_modules/strip-ansi/index.js] 161 bytes {renderer} [built]
  [./node_modules/vue/dist/vue.esm.js] 318 KiB {renderer} [built]
  [./node_modules/webpack-dev-server/client/index.js?http://localhost] (webpack)-dev-server/client?http://localhost 8.26 KiB {renderer} [built]
  [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {renderer} [built]
  [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {renderer} [built]
  [./node_modules/webpack-hot-middleware/client.js?noInfo=true&reload=true] (webpack)-hot-middleware/client.js?noInfo=true&reload=true 7.59 KiB {renderer} [built]
  [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {renderer} [built]
  [./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {renderer} [built]
  [./src/renderer/App.vue] 1.11 KiB {renderer} [built]
  [./src/renderer/main.js] 382 bytes {renderer} [built]
  [./src/renderer/router/index.js] 264 bytes {renderer} [built]
  [./src/renderer/store/index.js] 342 bytes {renderer} [built]
      + 54 hidden modules
  Child html-webpack-plugin for "index.html":
           Asset      Size  Chunks  Chunk Names
      index.html  1.38 MiB       0
      Entrypoint undefined = index.html
      [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs] 1.14 KiB {0} [built]
      [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
      [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]

┗ ----------------------------

┏ Main Process ---------------

  Hash: 2dfa5f258360a3c5c5ee
  Version: webpack 4.30.0
  Time: 3232ms
  Built at: 2019-04-23 12:28:47
    Asset     Size  Chunks             Chunk Names
  main.js  166 KiB    main  [emitted]  main
  Entrypoint main = main.js
  [0] multi ./src/main/index.dev.js ./src/main/index.js 40 bytes {main} [built]
  [./node_modules/7zip/index.js] 274 bytes {main} [built]
  [./node_modules/cross-unzip/index.js] 1.49 KiB {main} [built]
  [./node_modules/electron-devtools-installer/dist/downloadChromeExtension.js] 2.26 KiB {main} [built]
  [./node_modules/electron-devtools-installer/dist/index.js] 5.02 KiB {main} [built]
  [./node_modules/electron-devtools-installer/dist/utils.js] 1.88 KiB {main} [built]
  [./node_modules/rimraf/rimraf.js] 8.78 KiB {main} [built]
  [./node_modules/semver/semver.js] 37.9 KiB {main} [built]
  [./src/main/index.dev.js] 364 bytes {main} [built]
  [./src/main/index.js] 786 bytes {main} [built]
  [electron] external "electron" 42 bytes {main} [built]
  [electron-debug] external "electron-debug" 42 bytes {main} [built]
  [fs] external "fs" 42 bytes {main} [built]
  [https] external "https" 42 bytes {main} [built]
  [path] external "path" 42 bytes {main} [built]
      + 20 hidden modules

┗ ----------------------------

┏ Electron -------------------

  Debugger listening on
┗ ----------------------------

┏ Electron -------------------

  ws://127.0.0.1:5858/17a71390-5777-4c65-8355-fbe9e41f4ab7
  For help see https://nodejs.org/en/docs/inspector

┗ ----------------------------

┏ Electron -------------------

  Failed to fetch extension, trying 4 more times

┗ ----------------------------

┏ Electron -------------------

  Failed to fetch extension, trying 3 more times

┗ ----------------------------

┏ Electron -------------------

  Failed to fetch extension, trying 2 more times

┗ ----------------------------

┏ Electron -------------------

  Failed to fetch extension, trying 1 more times

┗ ----------------------------

┏ Electron -------------------

  Failed to fetch extension, trying 0 more times

┗ ----------------------------

┏ Electron -------------------

  Unable to install `vue-devtools`:
   Error: net::ERR_CONNECTION_TIMED_OUT

┗ ----------------------------

[xiaomizhou66]

windows 10

[rickythink]

YOU SHOULD USE A PROXY

[leetb-leetb]

I met it on Mac , how to fix it?

[primo19]

The fix is very simple yet hard to find without understanding of how electron works. So here's the simple fix.

Just install vue-devtools as devDependency npm i vue-devtools --save-dev or yarn add vue-devtools --dev then edit the src/main/index.dev.js

const BrowserWindow = electron.BrowserWindow;
// Install `electron-debug` with `devtron`
require("electron-debug")({ showDevTools: true });

// Add `vue-devtools`
require("electron").app.on("ready", async () => {
  // installExtension(VUEJS_DEVTOOLS)
  //   .then(() => {})
  //   .catch((err) => {
  //     console.log("Unable to install `vue-devtools`: \n", err);
  //   });
  await new BrowserWindow.addDevToolsExtension(
    "node_modules/vue-devtools/vender"
  );
});

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

You can now use Vue-Devtools on Electron Window

[crwgregory]

From following @primo19 suggestions:

1. Install devtools manually: npm i -D vue-devtools
2. Edit the index.dev.js file to support the installed module:

   
   # src/main/index.dev.ts

/**

• This file is used specifically and only for development. It installs
• electron-debug & vue-devtools. There shouldn't be any need to
• modify this file, but it can be used to extend your development
• environment. */

/ eslint-disable / const BrowserWindow = require('electron').BrowserWindow; // Install electron-debug with devtron require('electron-debug')({ showDevTools: true })

// Install vue-devtools require('electron').app.on('ready', async () => { // let installExtension = require('electron-devtools-installer') // installExtension.default(installExtension.VUEJS_DEVTOOLS) // .then(() => {}) // .catch(err => { // console.log('Unable to install vue-devtools: \n', err) // }) await new BrowserWindow.addDevToolsExtension( "node_modules/vue-devtools/vender" ); })

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

I'm running on Mac as well and was able to get the dev tools plugin working with the above file.

[cdbrkfxrpt]

@crwgregory - this throws me the following new errors:

┏ Electron -------------------

  (node:40039) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: BrowserWindow.addDevToolsExtensions is not a constructor

┗ ----------------------------

┏ Electron -------------------

  (node:40039) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

┗ ----------------------------

[crwgregory]

@cdbrkfxrpt You're probably running a newer version of electron that doesn't support the BrowserWindow https://stackoverflow.com/q/61894248/6214730 You'll probably have to downgrade or figure out how to migrate your code.

[jhonyjss]

this is my config, if could help someone, electron 12

import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'

app.on('ready', async () => {
      if (process.env.NODE_ENV !== 'production') {
        try {
          const vueDT = await installExtension(VUEJS_DEVTOOLS)
        } catch (e) {
          console.error('Vue Devtools failed to install:', e.toString())
        }
        // debugger
      }......