Electron + vue 打包桌面操作流程詳解

更新時間：2019年06月24日 11:38:37 作者：me_zhazha

這篇文章主要介紹了Electron + vue 打包桌面操作流程,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下

提前準(zhǔn)備一個vue項(xiàng)目，也可以使用初始的vue項(xiàng)目

vue init webpack

安裝到后邊有的會出現(xiàn)報(bào)錯，可以忽略，啟動npm run dev 啟動成功就可以

在vue項(xiàng)目下執(zhí)行下載以下依賴，會用到

cnpm install electron --save-dev
cnpm install electron-packager --save-dev //這個是打成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

改為這個pathname: path.join(__dirname, '../dist/index.html')

不懂的可以去搜vue 的 dist

這些改好了之后配置package.json

用來啟動 npm run abc

啟動成功為

啟動成功可以執(zhí)行下一步

在配置打包的package.json

關(guān)于electron-packager的配置，簡單介紹一下。

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

sourcedir 資源路徑，在本例中既是./dist/

appname 打包出的exe名稱

platform 平臺名稱（windows是win32）

arch 版本，本例為x64

到這里還沒有完因?yàn)檫€有坑呢

我就把坑跳過

將bulid的electron.js文件復(fù)制到dist中，將package.json也復(fù)制到當(dāng)中（提示dist文件和里面內(nèi)容自動生成不用自己創(chuàng)建）

然后修改electron.js

mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))

再修改復(fù)制到dist中的package.json

再啟動npm run go 會出現(xiàn)打包成功的文件夾

再從里面尋找exe文件就可以了?。。。?！

總結(jié)

以上所述是小編給大家介紹的Electron + vue 打包桌面操作流程詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

利用Vue3?+?SpringBoot打造高效Web實(shí)時消息推送系統(tǒng)
在Vue中實(shí)現(xiàn)消息推送,可以通過集成WebSocket服務(wù)來實(shí)現(xiàn)實(shí)時通信,這篇文章主要介紹了利用Vue3?+?SpringBoot打造高效Web實(shí)時消息推送系統(tǒng)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-11-11
vant-ui組件庫中如何修改NavBar導(dǎo)航欄的樣式
這篇文章主要介紹了vant-ui組件庫中如何修改NavBar導(dǎo)航欄的樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue內(nèi)聯(lián)處理器中訪問方法和訪問事件參數(shù)詳解
在 Vue 3 中,使用組合式 API 時,可以通過內(nèi)聯(lián)事件處理器來直接在模板中編寫事件處理邏輯,內(nèi)聯(lián)事件處理器不僅可以直接執(zhí)行簡單的操作,還可以調(diào)用組件中的方法,并訪問事件參數(shù),下面將詳細(xì)講解如何在內(nèi)聯(lián)事件處理器中調(diào)用方法以及訪問事件參數(shù),需要的朋友可以參考下
2024-12-12
vue?中使用?bimface詳情
這篇文章主要介紹了vue?中使用?bimface詳情,分別有安裝?vue?腳手架、創(chuàng)建項(xiàng)目、引入?bimface?響應(yīng)的文件、修改?App.vue?文件，實(shí)現(xiàn)頁面渲染等步驟，需要的小伙伴可以參考一下
2021-12-12
Vue?ECharts實(shí)現(xiàn)機(jī)艙座位選擇展示功能代碼詳解
這篇文章主要介紹了Vue?ECharts實(shí)現(xiàn)機(jī)艙座位選擇展示,本文給大家分享一段簡短的代碼通過效果圖展示給大家介紹的非常明白，需要的朋友可以參考下
2022-05-05
Vue中跨標(biāo)簽通信詳解
這篇文章主要為大家詳細(xì)介紹了介紹了Vue中跨標(biāo)簽通信的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-01-01
axios庫的核心代碼解析及總結(jié)
這篇博客針對axios庫的核心代碼做一個簡要總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
vue實(shí)現(xiàn)引入本地json的方法分析
這篇文章主要介紹了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ì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-05-05
weex里Vuex state使用storage持久化詳解
本篇文章主要介紹了weex里Vuex state使用storage持久化詳解，非常具有實(shí)用價值，需要的朋友可以參考下
2017-09-09