Electron development – using Vue devtools

Time:2021-4-27

It’s difficult to develop with electron without using the electron module, so we can’t preview the effect in real time in the browser. How to observe the state of Vue in electronic?

Integrating Vue devtools in elctron project

If you will integrate Vue devtools, then react is no problem.

Compile Vue devtools locally

1. GitHub portalvue-devtools
2.Electron development - using Vue devtools

  • Note that the default dev is 0,Need to cut tomaster1 / 2
  • Installation dependency
  • compile

Electron development - using Vue devtools
What we need is

/vue-devtools/shells/chrome

Add this document to our previous chapterselectronIn the self built devtools directory of the project
Electron development - using Vue devtools

Using plug-ins to load Vue devtools in main thread (very important)

Load Vue devtools like this in main. JS
Electron development - using Vue devtools

let uri =  path.resolve(process.cwd(), './devtools/chrome');
try {
    await electron.session.defaultSession.loadExtension(uri, {allowFileAccess: true});
}
catch (e) {
  //
}

Output a code of dev mode

Electron development - using Vue devtools

npm run start

Electron development - using Vue devtools

Load successfully, perfect!!!