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