electron-vue 插入 vue-devTools

Z时代
2024-01-10
分类：综合

vue

引用：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()
})