electron打包vue項(xiàng)目的方法 步驟
創(chuàng)建項(xiàng)目
點(diǎn)擊這里
添加electron-builder
1、在項(xiàng)目目錄下運(yùn)行命令：vue add electron-builder
2、electron-builder添加完成后會(huì)選擇electron版本，直接選擇最新版：
electron下載失敗
vue add electron-builder下載electron會(huì)下載失敗，使用淘寶鏡像下載:cnpm i electron
窗體運(yùn)行
1、下載完成后嘗試運(yùn)行electron窗體：npm run electron:serve
2、窗體運(yùn)行成功：
打包exe
1、運(yùn)行打包命令:npm run electron:build
2、打包時(shí)由于會(huì)在github下載包，國(guó)內(nèi)網(wǎng)絡(luò)一般會(huì)失敗，需要手動(dòng)下載nsis與winCodeSign(網(wǎng)絡(luò)允許的話(huà)你也可以自己到github下載，這里我下載分享出來(lái)了)，點(diǎn)擊這里下載，提取碼：1uq8，解壓后將nsis與winCodeSign復(fù)制(替換)到以下目錄：
3、復(fù)制文件后再次運(yùn)行打包命令即可打包成功：
4、打包完成后，項(xiàng)目目錄下會(huì)多出一個(gè)dist_eletron，打包出的exe即在其中，此exe需安裝后使用：
5、但在dist_eletron的win-unpacked下也會(huì)有與項(xiàng)目同名的exe，此exe無(wú)需安裝即可運(yùn)行，但依賴(lài)同級(jí)目錄下的文件，不能直接單獨(dú)使用:
白屏
1、到這里其實(shí)打包就已經(jīng)成功完成了，但你打開(kāi)exe后會(huì)發(fā)現(xiàn)與在項(xiàng)目中窗體運(yùn)行不一樣，或者直接白屏，這是由于vue與electron路由模式的原因，vue一般默認(rèn)history模式。
2、需要在router的index.js中修改：從vue-router中引入createWebHashHistory，將createWebHistory(process.env.BASE_URL)改為createWebHashHistory(process.env.BASE_URL)。
若為vue2的項(xiàng)目則直接將mode的值從history改為hash:
3、刪除項(xiàng)目中的dist_eletron目錄，重新npm run electron:build打包：
4、打包成功：
到此這篇關(guān)于electron打包vue項(xiàng)目的方法 步驟的文章就介紹到這了,更多相關(guān)electron打包vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue使用Element-UI部分組件適配移動(dòng)端問(wèn)題
這篇文章主要介紹了vue使用Element-UI部分組件適配移動(dòng)端問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
在現(xiàn)代Web開(kāi)發(fā)中,前端框架的使用越來(lái)越普遍,而Vue.js作為一款優(yōu)秀的前端框架,其生態(tài)系統(tǒng)中有著非常重要的一個(gè)組件——Vue Router,在本篇博客中,我們將深入探討如何在Vue Router中定義路由規(guī)則,需要的朋友可以參考下2024-12-12
el-table實(shí)現(xiàn)給每行添加loading效果案例
這篇文章主要介紹了el-table實(shí)現(xiàn)給每行添加loading效果案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vant 時(shí)間選擇器--開(kāi)始時(shí)間和結(jié)束時(shí)間實(shí)例
這篇文章主要介紹了vant 時(shí)間選擇器--開(kāi)始時(shí)間和結(jié)束時(shí)間實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue權(quán)限路由實(shí)現(xiàn)的方法示例總結(jié)
這篇文章主要給大家介紹了關(guān)于vue權(quán)限路由實(shí)現(xiàn)方法的相關(guān)資料，文中通過(guò)示例代碼介紹地方非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
這篇文章主要介紹了詳解Vscode中使用Eslint終極配置大全，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vueJs函數(shù)toRaw?markRaw使用對(duì)比詳解
這篇文章主要為大家介紹了vueJs函數(shù)toRaw?markRaw使用對(duì)比詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
vue click.stop阻止點(diǎn)擊事件繼續(xù)傳播的方法
今天小編就為大家分享一篇vue click.stop阻止點(diǎn)擊事件繼續(xù)傳播的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue2使用思維導(dǎo)圖jsmind的詳細(xì)代碼
jsMind是一個(gè)基于Js的思維導(dǎo)圖庫(kù),jsMind是一個(gè)純JavaScript類(lèi)庫(kù),用于創(chuàng)建、展示和操作思維導(dǎo)圖,這篇文章主要給大家介紹了關(guān)于vue2使用思維導(dǎo)圖jsmind的詳細(xì)代碼,需要的朋友可以參考下2024-06-06
Vue是一種流行的Web開(kāi)發(fā)框架,它提供了一個(gè)雙向綁定的語(yǔ)法糖。在Vue中,我們可以很容易地獲取頁(yè)面上的數(shù)據(jù),并且可以實(shí)時(shí)的響應(yīng)其變化,這篇文章主要給大家介紹了關(guān)于Vue獲取input值的四種常用方法,需要的朋友可以參考下2023-09-09