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
啟動
在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
#Google商店是因為專案需要連網商店下載專案需要連網商店下載專案需要連網商店下載並載入vue-devtools失敗導致。
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
嘗試了很多辦法載入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中刪掉提示對應的內容
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前
By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前
By DDD
Inzoi：如何申請學校和大學
3 週前
By DDD
如何修復KB5055518無法在Windows 10中安裝？
2 週前
By DDD
Roblox：Dead Rails - 如何召喚和擊敗Nikola Tesla
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Nvgpucomp64.dll導致Windows PC遊戲崩潰;
Mar 26, 2024 am 08:20 AM
如果Nvgpucomp64.dll導致遊戲經常崩潰，這裡提供的解決方案可能會對您有所幫助。這種問題通常是由於過時或損壞的顯示卡驅動程式、遊戲檔案損壞等原因引起的。修復這些問題可以幫助您解決遊戲崩潰的困擾。 Nvgpucomp64.dll檔案與NVIDIA顯示卡關聯。當這個檔案崩潰時，你的遊戲也會崩潰。這通常發生在《LordsoftheFallen》、《LiesofP》、《RocketLeague》和《ApexLegends》等遊戲中。 Nvgpucomp64.dll使WindowsPC上的遊戲崩潰如果N
Windows系統目錄CoreMessaging.dll檔案遺失找不到問題解析
Feb 11, 2024 pm 11:42 PM
很多的用戶在利用電腦玩遊戲的時候會出現提示coremessaging.dll丟失的情況，相信很多的用戶們第一時間都會覺得軟體或者是遊戲的問題，其實不是的，這是因為電腦缺少了dll文件，用戶可以去下載coremessaging.dll檔案就可以了。下面就讓本站來為使用者來仔細的介紹一下Windows系統目錄CoreMessaging.dll檔案遺失找不到問題解析吧。 Windows系統目錄CoreMessaging.dll檔案遺失找不到問題解析1、下載CoreMessaging.dll檔案2、將
vue3專案中怎麼使用tinymce
May 19, 2023 pm 08:40 PM
tinymce是一個功能齊全的富文本編輯器插件，但在vue中引入tinymce並不像別的Vue富文本插件一樣那麼順利，tinymce本身並不適配Vue，還需要引入@tinymce/tinymce-vue，並且它是國外的富文本插件，沒有透過中文版本，需要在其官網下載翻譯包(可能需要翻牆)。 1.安裝相關依賴npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2、下載中文包3.引入皮膚和漢化包在項目public資料夾下新建tinymce資料夾，將下載的
vue3+vite:src使用require動態匯入圖片報錯怎麼解決
May 21, 2023 pm 03:16 PM
vue3+vite:src使用require動態導入圖片報錯和解決方法vue3+vite動態的導入多張圖片vue3如果使用的是typescript開發，就會出現require引入圖片報錯，requireisnotdefined不能像使用vue2這樣imgUrl:require(' …/assets/test.png')導入，是因為typescript不支援require所以用import導入，下面介紹如何解決：使用awaitimport
Vue3如何實作刷新頁面局部內容
May 26, 2023 pm 05:31 PM
想要實現頁面的局部刷新，我們只需要實現局部元件（dom）的重新渲染。在Vue中，想要實現這效果最簡單的方式方法就是使用v-if指令。在Vue2中我們除了使用v-if指令讓局部dom的重新渲染，也可以新建一個空白元件，需要刷新局部頁面時跳轉至這個空白元件頁面，然後在空白元件內的beforeRouteEnter守衛中又跳轉回原來的頁面。如下圖所示，如何在Vue3.X中實現點擊刷新按鈕實現紅框範圍內的dom重新加載，並展示對應的加載狀態。由於Vue3.X中scriptsetup語法中組件內守衛只有o
Vue3怎麼解析markdown並實現程式碼高亮顯示
May 20, 2023 pm 04:16 PM
Vue實作部落格前端，需要實作markdown的解析，如果有程式碼則需要實作程式碼的高亮。 Vue的markdown解析函式庫很多，如markdown-it、vue-markdown-loader、marked、vue-markdown等。這些庫都大同小異。這裡選用的是marked，程式碼高亮的函式庫選用的是highlight.js。具體實現步驟如下：一、安裝依賴庫在vue專案下開啟命令窗口，並輸入以下命令npminstallmarked-save//marked用於將markdown轉換成htmlnpmins
怎麼使用vue3+ts+axios+pinia實現無感刷新
May 25, 2023 pm 03:37 PM
vue3+ts+axios+pinia實作無感刷新1.先在專案中下載aiXos和pinianpmipinia--savenpminstallaxios--save2.封裝axios請求-----下載js-cookienpmiJS-cookie-s//引入aixosimporttype{AxiosRequestConfigig ,AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess
Vue3復用元件怎麼使用
May 20, 2023 pm 07:25 PM
前言無論是vue還是react，當我們遇到多處重複程式碼的時候，我們都會想著如何重複使用這些程式碼，而不是一個檔案裡充斥著一堆冗餘程式碼。實際上，vue和react都可以透過抽組件的方式來達到復用，但如果遇到一些很小的程式碼片段，你又不想抽到另外一個檔案的情況下，相比而言，react可以在相同文件裡面宣告對應的小元件，或透過renderfunction來實現，如：constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(
