解決electron10.1.3+vue3無法顯示vue-devtools問題

項目使用@vue/cli 4腳手架建立

package如下，我使用的electron-devtools-installer 科學上網自動安裝

"vue": "^3.0.0"
"electron": "10.1.3",
"electron-devtools-installer": "^3.1.1",
"vue-cli-plugin-electron-builder": "~2.0.0-rc.4"
           

background.js中的安裝代碼：

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();
});
           

警告：

ExtensionLoadWarning: Warnings loading extension at C:\Users\guo\AppData\Roaming\cute_unity_launcher\extensions\ljjemllljcmogpfapbkkighbhhppjdbg: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'update_url'. Permission 'contextMenus' is unknown or URL pattern is malformed. Cannot load extension 
with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.
           

結果就是控制台不顯示vue

先是搜尋到非常多的vue+electron無法顯示vue-devtools的解決方案：

比如 ：

1.在win.loadUrl增加await，然而我改完之後并沒有效果

async function createWindow () {
// ...
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
// ...
           

2.BrowserWindow.add改為session.load，可是問題是我看了下installExtension中的代碼，内部是使用的session.loadExtension
           

BrowserWindow.addDevToolsExtension()

//更換為

session.defaultSession.loadExtension()
           

饒了很多彎路最後發現走偏了方向，我在谷歌擴充商店的評論中看到了一個issues連結：

https://github.com/vuejs/vue-devtools/issues/1279

Solution is in the docs: https://v3.vuejs.org/guide/migration/introduction.html#devtools-extension

-> install the beta extension and it'll work ;)

最終發現是vue3的問題，使用vue3需要使用Beta版本的devtools

商店連結在這裡：

https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=en

于是最終解決辦法：

修改background.js， 加載beta版本的vue-devtools：第一次加載需從google自動下載下傳，請自行科學上網

最終終于成功顯示vue！ 不過上方那個Unrecognized manifest key警告倒還是存在，如果有解決辦法了請告訴我！

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      // VUEJS_DEVTOOLS ---- vue3 用不了
      const { default: installExtension, } = require('electron-devtools-installer')
      // 使用beta版 vue-devtools
      // 參考連結 https://github.com/vuejs/vue-devtools/issues/1279
      // https://v3.vuejs.org/guide/migration/introduction.html#devtools-extension
      // https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
      var vue_devtools_beta = { id: "ljjemllljcmogpfapbkkighbhhppjdbg", electron: ">=1.2.1" }
      var result = await installExtension(vue_devtools_beta)
      if (result) {
        console.log("success load : " + result)
      }
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})
           

提到的工程源代碼：

https://github.com/gameguo/cute_unity_launcher/tree/vue3.0

修改之後最終運作效果：