【Electron+Vue】Failed to fetch extension, trying 0 more times. Vue Devtools failed to install...

问题描述

使用 electron-builder 构建 vue 项目，运行 electron:serve ，启动 Electron 时报错。

 INFO  Launching Electron...
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
Failed to fetch extension, trying 0 more times
Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT

---

原因分析

electron-builder 在启动 Electron 时尝试安装 Vue Devtools ，但是由于网络连接或防火墙等原因导致安装失败，从而出现错误提示。

解决这个问题的方法是手动安装 Vue Devtools，并在 background.js 文件中注释掉相关的代码。这样，在应用程序启动时就不会尝试下载 Vue Devtools 了。

---

解决方案

首先手动安装 vue-devtools

npm install vue-devtools --save-dev

然后修改 background.js 文件，找到

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

将其修改为

// import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'

接着找到以下代码块

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS3_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 {
      await installExtension(VUEJS3_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
*/
  createWindow()
})

这样就完成了修改，应用程序启动时就不会尝试下载 Vue Devtools 了。