今天小編給大家分享一下vue3+electron12+dll開發(fā)客戶端配置的方法的相關知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：做網(wǎng)站、成都網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的道外網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

修改倉庫源

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

在開始配置前，可以將yarn和npm的rc文件稍作修改，使用命令或者文件直接修改.npmrc或者.yarnrc，這兩個全局配置文件一般在C:\user\你的當前賬戶這個文件夾下，或者在當前項目下新建文件命令rc文件以局部更改配置。
因為electron下載會因為網(wǎng)絡問題而失敗，因此修改為淘寶源，華為源亦可。

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版本，內(nèi)容創(chuàng)建后進入項目目錄，追加 vue electron-builder 配置electron，版本選擇當前12版本。

啟動

在package.json中已經(jīng)裝配好對應的啟動命令，

• 使用npm run electron:serve 開啟開發(fā)

• npm run electron:build 編譯打包生產(chǎn)

更換vue-devtools

項目工程下 src/background.ts 為electron的啟動目錄，開發(fā)環(huán)境下會出現(xiàn)啟動等待時間較長的以下情況

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

是因為項目需要聯(lián)網(wǎng)谷歌商店下載并加載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()
})

之前試了很多辦法，不可用。后來再仔細對照以下，發(fā)現(xiàn)了一些問題。

vue3的版本和vue2版本的vue-devtools已然不同，所以vue2的dev-tools并不能給vue3使用，因此，需要下載vue3對應的開發(fā)工具。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-Crx4Chrome.com:
  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.
(Use `electron --trace-warnings ...` to show where the warning was created)

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

注意事項

<pre id="uea82"></pre>

<pre id="uea82"></pre>