您好,登錄后才能下訂單哦!
小編給大家分享一下vue3+electron12+dll開(kāi)發(fā)客戶端配置的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
由于electron版本的未知性,可能存在serve可用而build之后打開(kāi)白屏的情況,因此需要謹(jǐn)慎對(duì)待。最好在版本可用的情況下commit一個(gè)版本,方便代碼回滾,如果誰(shuí)有更好的資料希望共享。
在開(kāi)始配置前,可以將yarn和npm的rc文件稍作修改,使用命令或者文件直接修改.npmrc或者.yarnrc,這兩個(gè)全局配置文件一般在C:\user\你的當(dāng)前賬戶這個(gè)文件夾下,或者在當(dāng)前項(xiàng)目下新建文件命令rc文件以局部更改配置。
因?yàn)閑lectron下載會(huì)因?yàn)榫W(wǎng)絡(luò)問(wèn)題而失敗,因此修改為淘寶源,華為源亦可。
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/
安裝過(guò)程使用 vue create <your projectname> 自選為vue3版本,內(nèi)容創(chuàng)建后進(jìn)入項(xiàng)目目錄,追加 vue electron-builder 配置electron,版本選擇當(dāng)前12版本。
在package.json中已經(jīng)裝配好對(duì)應(yīng)的啟動(dòng)命令,
使用npm run electron:serve 開(kāi)啟開(kāi)發(fā)
npm run electron:build 編譯打包生產(chǎn)
項(xiàng)目工程下 src/background.ts 為electron的啟動(dòng)目錄,開(kāi)發(fā)環(huán)境下會(huì)出現(xiàn)啟動(dòng)等待時(shí)間較長(zhǎng)的以下情況
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
是因?yàn)轫?xiàng)目需要聯(lián)網(wǎng)谷歌商店下載并加載vue-devtools失敗導(dǎo)致。
嘗試了很多辦法加載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() })
之前試了很多辦法,不可用。后來(lái)再仔細(xì)對(duì)照以下,發(fā)現(xiàn)了一些問(wèn)題。
vue3的版本和vue2版本的vue-devtools已然不同,所以vue2的dev-tools并不能給vue3使用,因此,需要下載vue3對(duì)應(yīng)的開(kāi)發(fā)工具。vue2版本最新為5.x,而vue3的版本則為6.x beta版本??梢酝ㄟ^(guò)crx4chrome下載此版本的插件。將下載好的crx解壓出來(lái),然后拷貝到工程根目錄下 采用session加載的形式,將原來(lái) 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() })
啟動(dòng)項(xiàng)目后,即可以查看 vue 的擴(kuò)展。 對(duì)于
(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)
可以不予理會(huì)。如果不想看到煩人的提示可以到tools的manifest.json中刪掉提示對(duì)應(yīng)的內(nèi)容
<script setup> 語(yǔ)法不可以使用
當(dāng)使用script-setup作為模塊時(shí),在serve階段可以正常使用,但是在build之后組件未加載,頁(yè)面呈現(xiàn)空白,且不報(bào)錯(cuò),原因未知
使用 electron-edge-js 加載 c# 開(kāi)發(fā)的 dll 文件,配置過(guò)程略微繁瑣,花費(fèi)2天時(shí)間尋求解答,但是均未果,以下是解決辦法,需要對(duì)癥下藥
c++和c#開(kāi)發(fā)的dll使用不同的加載器,c++使用ffi-napi。
使用edge需要同時(shí)增加三處配置
當(dāng)什么都沒(méi)有配置時(shí),將會(huì)發(fā)生 Uncaught (in promise) Error: Cannot find module '...\node_modules\electron\dist\resources\electron.asar\renderer\native\win32\x64\14.16.0\edge_nativeclr' 此時(shí)需要在vue.config.js文件增加,如果沒(méi)有配置文件,則需要在package.json同級(jí)創(chuàng)建。
module.exports = { pluginOptions: { electronBuilder: { externals: ['electron-edge-js'] } } }
當(dāng)配置未開(kāi)啟時(shí),將不能使用 __dirname __filename等nodejs內(nèi)置變量
Uncaught (in promise) ReferenceError: __dirname is not defined 首先需要配置 new BrowserWindow
{ // 如果使用到nodejs的api,則打包時(shí)需要將此設(shè)置為true nodeIntegration: true, // 同時(shí),需要設(shè)置此項(xiàng)為false // 未設(shè)置時(shí)報(bào) Uncaught ReferenceError: require is not defined contextIsolation: false }
以上配置完成后會(huì)報(bào) Uncaught (in promise) TypeError: fs.existsSync is not a function
此時(shí)需要繼續(xù)增加 vue.config.js 的配置項(xiàng)
module.exports = { pluginOptions: { electronBuilder: { externals: ['electron-edge-js'], // 此處同樣需要開(kāi)啟,將會(huì)在編譯階段將引用關(guān)系寫入 nodeIntegration: true, } } }
如果單獨(dú)配置此項(xiàng),但是并沒(méi)有開(kāi)啟 new BrowserWindow的 nodeIntegration: true ,則會(huì)發(fā)生 Uncaught ReferenceError: require is not defined
此外,對(duì)于dll放置的文件夾,一般在項(xiàng)目根目錄創(chuàng)resources用于存放資源,并且項(xiàng)目打包過(guò)程中會(huì)不會(huì)直接打包資源目錄,所以需要增加資源配置,以防止出錯(cuò)。對(duì)于文件的引用,在開(kāi)發(fā)環(huán)境下,為當(dāng)前所看到的結(jié)構(gòu),當(dāng)編譯打包后,為安裝目錄下resources目錄,所以生產(chǎn)和開(kāi)發(fā)的引用文件存在一定區(qū)別,可以實(shí)驗(yàn)后再看文件引用
module.exports = { pluginOptions: { electronBuilder: { externals: ['electron-edge-js'], // 此處同樣需要開(kāi)啟,將會(huì)在編譯階段將引用關(guān)系寫入 nodeIntegration: true, builderOptions:{ extraResources: { // 拷貝靜態(tài)文件到指定位置,否則會(huì)提示文件找不到 from: 'resources/', to: './' }, } } } }
提供文件獲取目錄方法,可以直接獲取不同操作系統(tǒng)下app的resource目錄,如果是window即 process.platform==='win32'
const path = require('path') export function getAppResourcePath (filePath:string) { if (process.platform === 'darwin' || process.platform === 'linux') { if (process.env.NODE_ENV === 'development') { return path.resolve('resources/' + filePath) } else { return path.join(__dirname, '..') + filePath } } else { return path.resolve('resources/' + filePath) } }
使用setup語(yǔ)法時(shí),需使用require('electron-edge-js')引入,不可以使用import,否則會(huì)報(bào) Syntax Error: TypeError: Cannot read property 'content' of null 而非 setup語(yǔ)法,則可以直接import
系統(tǒng)本身是帶有框架的,如果需要自定義框架,可以使用frameless 設(shè)置,如果需要使用自定義組件(比如 div.custom-frame-title)拖拽操作窗口時(shí),需要給對(duì)應(yīng)的元素增加樣式:
.custom-frame-title { -webkit-user-select: none; // 此項(xiàng)防止與文本選擇沖突 -webkit-app-region: drag; // 此項(xiàng)為系統(tǒng)相應(yīng)狀態(tài)欄 }
import {ipcMain,ipcRenderer} from 'electron'
在electron中有很多可用api,其中最重要的是:ipcMain和ipcRenderer,用于ui進(jìn)程和系統(tǒng)進(jìn)程的通信。 在vue內(nèi)使用ipcRenderer.on('eventname') 接受系統(tǒng)發(fā)來(lái)的消息,用ipcRenderer.send('eventname') 發(fā)送通知給系統(tǒng),同樣ipcMain可以在主線程使用。
ipc通常結(jié)合自定義標(biāo)題欄完成以下操作,或者其他需要操作窗口本身的事件
win.minimize() //最小化窗口 win.maximize() //最大化窗口 win.close() //關(guān)閉窗口 win.hide() //隱藏窗口
以上是“vue3+electron12+dll開(kāi)發(fā)客戶端配置的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。