?? 問(wèn)題

描述

對(duì)于某些electron項(xiàng)目，啟動(dòng)的時(shí)候，控制臺(tái)會(huì)打印Failed to fetch extension, trying 4 more times這樣的日志。
作為重度強(qiáng)迫癥患者，必須解決掉。

環(huán)境

1?? vue-devtools

Vue Devtools 是一款由 Vue.js 官方開(kāi)發(fā)的開(kāi)發(fā)工具，旨在幫助開(kāi)發(fā)者更輕松地調(diào)試和開(kāi)發(fā) Vue.js 應(yīng)用程序。它是一個(gè)瀏覽器擴(kuò)展，可以安裝在 Chrome、Firefox 和 Safari 等主流瀏覽器中。

Vue Devtools 提供了豐富的功能，包括：

• 組件樹(shù)查看器：可以查看整個(gè)應(yīng)用程序的組件結(jié)構(gòu)和關(guān)系，方便調(diào)試和優(yōu)化。
• 狀態(tài)查看器：可以實(shí)時(shí)查看組件的狀態(tài)和數(shù)據(jù)變化，便于調(diào)試和排查問(wèn)題。
• 事件監(jiān)聽(tīng)器：可以查看組件上的事件監(jiān)聽(tīng)器，便于調(diào)試事件處理邏輯。
• 性能分析：可以分析應(yīng)用程序的性能瓶頸，幫助優(yōu)化性能。
• 開(kāi)發(fā)者工具：提供了一系列方便的開(kāi)發(fā)者工具，如組件修改、樣式檢查等。

總之，Vue Devtools 是 Vue.js 開(kāi)發(fā)者必備的工具之一，可以幫助開(kāi)發(fā)者更高效地開(kāi)發(fā)和調(diào)試 Vue.js 應(yīng)用程序。

問(wèn)題來(lái)源

為了方便使用vue-devtools。很多項(xiàng)目都配置了庫(kù)electron-devtools-installer，該庫(kù)會(huì)自動(dòng)下載并加載vue-devtools。
但是，下載地址國(guó)內(nèi)無(wú)法正常訪問(wèn)，導(dǎo)致報(bào)錯(cuò)

解決思路

• 屏蔽electron-devtools-installer加載的代碼
• 通過(guò)其它方式加載本地vue-devtools插件

上面是解決思路，下面我們將實(shí)操起來(lái)，詳細(xì)講解其操作步驟。

2?? 屏蔽electron-devtools-installer加載的代碼

electron-devtools-installer加載很簡(jiǎn)單，直接使用庫(kù)中的方法即可：electronDevtoolsInstaller(VUEJS_DEVTOOLS)。
下面是庫(kù)的常見(jiàn)使用示例，直接屏蔽掉electronDevtoolsInstaller所在代碼就行了。

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

app.on("ready", async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
       electronDevtoolsInstaller(VUEJS_DEVTOOLS)
        .then((name) => console.log(`installed: ${name}`))
        .catch(err => console.log('Unable to install `vue-devtools`: \n', err))
    } catch (e) {
      console.error("Vue Devtools failed to install:", e.toString());
    }
  }
  createWindow();
});

3?? 加載本地vue-devtools插件

代碼實(shí)現(xiàn)electron加載本地插件

electron包含加載本地插件的接口，直接調(diào)用session.defaultSession.loadExtension，傳遞插件路徑即可。

核心代碼如下所示：

      // 新增的：安裝本地vue-devtools
      const { session } = require("electron");
      const path = require("path");
      session.defaultSession.loadExtension(
        path.resolve(__dirname, "../../_devtools/Vuejs-devtools-6.5.1")
      );

獲取vue-devtools：【推薦】Edge下載最新插件

• 打開(kāi)Edge瀏覽器：

• 打開(kāi)插件下載地址：https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home

• 搜索vue-devtools，點(diǎn)擊“獲取”即可安裝
  

• 獲取插件ID
  瀏覽器中打開(kāi)edge://extensions/，找到Vue.js devtools，點(diǎn)擊后打開(kāi)詳情頁(yè)。
  這時(shí)瀏覽器的地址中顯示出插件ID：olofadcdnkkjdfgjcmjaadnlehnnihnl
  

打開(kāi)目錄C:\Users\Administrator\AppData\Local\Microsoft\Edge\User Data\Default\Extensions\olofadcdnkkjdfgjcmjaadnlehnnihnl（其中Administrator替換為自己的電腦賬號(hào)名），我們將下面內(nèi)容拷貝到我們的項(xiàng)目目錄即可。

獲取vue-devtools：源碼編譯

• 手動(dòng)clone項(xiàng)目vue-devtools
• 然后切換到master分支，默認(rèn)的是dev分支：
• 編譯生成插件

# REM 手動(dòng)clone項(xiàng)目vue-devtools
git clone https://github.com/vuejs/vue-devtools.git

# REM 然后切換到master分支，默認(rèn)的是dev分支：
git checkout master

# REM 進(jìn)入vue-devtools根目錄：
npm install
npm run build

獲取vue-devtools：網(wǎng)上找編譯好的

這個(gè)就不說(shuō)了，簡(jiǎn)單方便，但是獲取的不一定是最新的。
小編使用的是這個(gè)項(xiàng)目的：https://gitee.com/ziyoren/electron-vite-vue2。

?? 結(jié)論

遇到問(wèn)題，多搜索，多思考，結(jié)合現(xiàn)有知識(shí)，找到合適的方案。

這個(gè)問(wèn)題半年前就發(fā)現(xiàn)了，當(dāng)時(shí)沒(méi)有解決掉，后來(lái)經(jīng)常想到該問(wèn)題，最近想到通過(guò)Edge瀏覽器可以下載最新的插件，省去了各種可能遇到的坑，最終解決問(wèn)題。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-726471.html

?? 參考資料

• 【chrome基礎(chǔ)】Chrome、Chromium、libcef、electron版本關(guān)系大揭秘！ https://blog.csdn.net/kinghzking/article/details/125896594
• electron+vue項(xiàng)目添加vue-devTools https://www.jianshu.com/p/cc48d4520de3

到了這里，關(guān)于【electron】手把手教你在 electron 環(huán)境下使用 vue-devtools，附詳細(xì)報(bào)錯(cuò)解決辦法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！