vue3+electron12+dll開發客戶端設定的方法

修改倉庫來源

由於electron版本的未知性，可能存在serve可用而build之後開啟白螢幕的情況，因此需要謹慎對待。最好在版本可用的情況下commit一個版本，方便程式碼回滾，如果誰有更好的資料希望共享。

在開始設定前，可以將yarn和npm的rc檔稍作修改，使用指令或檔案直接修改.npmrc或.yarnrc，這兩個全域設定檔一般在C:\user\你的當前帳戶這個資料夾下，或在目前專案下新建檔案指令rc檔案以局部變更配置。
因為electron下載會因為網路問題而失敗，因此修改為淘寶源，華為源亦可。

npm set config registry http://registry.npm.taobao.org/
npm set config chromedriver_cdnurl http://registry.npm.taobao.org/chromedriver
npm set config electron_mirror http://registry.npm.taobao.org/electron/
npm set config electron_builder_binaries_mirror http://registry.npm.taobao.org/electron-builder-binaries/

安裝程序使用 vue create 自選為vue3版本，內容建立後進入專案目錄，追加 vue electron-builder 設定electron，版本選擇目前12版本。

啟動

在package.json中已經組裝好對應的啟動指令，

• 使用npm run electron:serve 開啟開發

• npm run electron:build 編譯打包生產

更換vue-devtools

##計畫工程下src/background .ts 為electron的啟動目錄，開發環境下會出現啟動等待時間較長的以下情況

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

#Google商店是因為專案需要連網商店下載專案需要連網商店下載專案需要連網商店下載並載入vue-devtools失敗導致。

嘗試了很多辦法載入tools都失效，因此暫行手段：去掉tools。程式碼找到，去掉 installExtension 即可

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

之前試了很多辦法，不可用。後來再仔細對照以下，發現了一些問題。

vue3的版本和vue2版本的vue-devtools已然不同，所以vue2的dev-tools並不能給vue3使用，因此，需要下載vue3對應的開發工具。 vue2版本最新為5.x，而vue3的版本則為6.x beta版本。可以透過crx4chrome下載此版本的插件。將下載好的crx解壓縮出來，然後拷貝到工程根目錄下 採用session載入的形式，將原來 await installExtension(VUEJS_DEVTOOLS)的部分替換為

import {session} from 'electron'

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
    const vue_devtools = 'ljjemllljcmogpfapbkkighbhhppjdbg-6.0.0-beta-13-Crx4Chrome.com'
    await session.defaultSession.loadExtension(path.resolve(vue_devtools))
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

啟動專案後，即可以查看 vue 的擴充功能。對於

(node:5904) ExtensionLoadWarning: Warnings loading extension at E:\scan\vue3_electron\ljjemllljcmogpfapbkkighbhhppjdbg-6.0.0-beta-13-Crx4Ckkighbr. '.

  Unrecognized manifest key 'update_url'.

  Permission 'contextMenus' is unknown or URL pattern is malformed.
  Cannot load extension with file or directory name name names for by the system.
(Use `electron --trace-warnings ...` to show where the warning was created)


可以不予理會。如果不想看到煩人的提示可以到tools的manifest.json中刪掉提示對應的內容

注意事項