Electron + vue 打包桌面操作流程詳解
提前準(zhǔn)備一個(gè)vue項(xiàng)目，也可以使用初始的vue項(xiàng)目
vue init webpack
安裝到后邊有的會(huì)出現(xiàn)報(bào)錯(cuò)，可以忽略，啟動(dòng)npm run dev 啟動(dòng)成功就可以
在vue項(xiàng)目下執(zhí)行下載以下依賴，會(huì)用到
cnpm install electron --save-dev cnpm install electron-packager --save-dev //這個(gè)是打成exe文件的插件，之后要用，提前下載好
獲取Electron的資源
git clone https://github.com/electron/e... cd electron-quick-start cnpm install //這里我用的是cnpm,npm太慢了
將Electron獲取到資源的main.js復(fù)制到vue里面的bulid里面并修改為electron.js
然后修改
將assetsPublicPath: '/' 改為./，都是為了獲取準(zhǔn)確的路徑
然后再修改electron.js
改為 這個(gè)pathname: path.join(__dirname, '../dist/index.html')
不懂的可以去搜vue 的 dist
這些改好了之后配置package.json
用來(lái)啟動(dòng) npm run abc
啟動(dòng)成功為
啟動(dòng)成功可以執(zhí)行下一步
在配置打包的package.json
關(guān)于electron-packager的配置，簡(jiǎn)單介紹一下。
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
sourcedir 資源路徑，在本例中既是./dist/
appname 打包出的exe名稱
platform 平臺(tái)名稱（windows是win32）
arch 版本，本例為x64
到這里還沒有完因?yàn)檫€有坑呢
我就把坑跳過(guò)
將bulid的electron.js文件復(fù)制到dist中，將package.json也復(fù)制到當(dāng)中（提示dist文件和里面內(nèi)容自動(dòng)生成不用自己創(chuàng)建）
然后修改electron.js
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
再修改復(fù)制到dist中的package.json
再啟動(dòng)npm run go 會(huì)出現(xiàn)打包成功的文件夾
再?gòu)睦锩鎸ふ襡xe文件 就可以了?。。。?！
總結(jié)
以上所述是小編給大家介紹的Electron + vue 打包桌面操作流程詳解,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
- Vue3和Electron實(shí)現(xiàn)桌面端應(yīng)用詳解
- 基于Electron+Vite快速構(gòu)建Vue3桌面應(yīng)用
- Electron+Vue3+Vite搭建桌面應(yīng)用的示例代碼
- 詳解如何使用vue和electron開發(fā)一個(gè)桌面應(yīng)用
- vue + Electron 制作桌面應(yīng)用的示例代碼
- Vue項(xiàng)目使用electron打包桌面應(yīng)用方式
- Vue+Electron打包桌面應(yīng)用(超詳細(xì)完整教程)
- Electron?+?Vue3桌面應(yīng)用開發(fā)實(shí)戰(zhàn)指南(含完整代碼)
相關(guān)文章
利用Vue3?+?SpringBoot打造高效Web實(shí)時(shí)消息推送系統(tǒng)
在Vue中實(shí)現(xiàn)消息推送,可以通過(guò)集成WebSocket服務(wù)來(lái)實(shí)現(xiàn)實(shí)時(shí)通信,這篇文章主要介紹了利用Vue3?+?SpringBoot打造高效Web實(shí)時(shí)消息推送系統(tǒng)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-11-11
vant-ui組件庫(kù)中如何修改NavBar導(dǎo)航欄的樣式
這篇文章主要介紹了vant-ui組件庫(kù)中如何修改NavBar導(dǎo)航欄的樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue內(nèi)聯(lián)處理器中訪問方法和訪問事件參數(shù)詳解
在 Vue 3 中,使用組合式 API 時(shí),可以通過(guò)內(nèi)聯(lián)事件處理器來(lái)直接在模板中編寫事件處理邏輯,內(nèi)聯(lián)事件處理器不僅可以直接執(zhí)行簡(jiǎn)單的操作,還可以調(diào)用組件中的方法,并訪問事件參數(shù),下面將詳細(xì)講解如何在內(nèi)聯(lián)事件處理器中調(diào)用方法以及訪問事件參數(shù),需要的朋友可以參考下2024-12-12
這篇文章主要介紹了vue?中使用?bimface詳情,分別有安裝?vue?腳手架、創(chuàng)建項(xiàng)目、引入?bimface?響應(yīng)的文件、修改?App.vue?文件，實(shí)現(xiàn)頁(yè)面渲染等步驟，需要的小伙伴可以參考一下2021-12-12
Vue?ECharts實(shí)現(xiàn)機(jī)艙座位選擇展示功能代碼詳解
這篇文章主要介紹了Vue?ECharts實(shí)現(xiàn)機(jī)艙座位選擇展示,本文給大家分享一段簡(jiǎn)短的代碼通過(guò)效果圖展示給大家介紹的非常明白，需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細(xì)介紹了介紹了Vue中跨標(biāo)簽通信的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
這篇博客針對(duì)axios庫(kù)的核心代碼做一個(gè)簡(jiǎn)要總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了vue實(shí)現(xiàn)引入本地json的方法,結(jié)合實(shí)例形式分析了vue.js加載本地json文件及解析json數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
Vue利用draggable實(shí)現(xiàn)多選拖拽效果
這篇文章主要為大家詳細(xì)介紹了如何利用vue中的draggable插件實(shí)現(xiàn)多選拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
本篇文章主要介紹了weex里Vuex state使用storage持久化詳解，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09