electron-vue 插入 vue-devTools

引用：https://www.jianshu.com/p/cc48d4520de3

使用：https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/recipes.html#debugging-with-vscode

中的例子：https://github.com/nklayman/electron-vscode-debug-example

 

这个安装可真是太难了

 

 

始终报：Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT

 

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
        await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

改为：

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      // 新增的：安装vue-devtools
      const { session } = require("electron");
      const path = require("path");
      session.defaultSession.loadExtension(
        path.resolve(__dirname, "D:/SoftWare/devtools-5.1.1/shells/chrome")  //这个是刚刚build好的插件目录
      ); 
      //await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

加入vue-devTools 成功.。

 

就这样就可以调试了，具体配置看官网Demo