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下載包，國內(nèi)網(wǎng)絡(luò)一般會(huì)失敗，需要手動(dòng)下載nsis與winCodeSign(網(wǎng)絡(luò)允許的話你也可以自己到github下載，這里我下載分享出來了)，點(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無需安裝即可運(yùn)行，但依賴同級目錄下的文件，不能直接單獨(dú)使用:
白屏
1、到這里其實(shí)打包就已經(jīng)成功完成了，但你打開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)目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue動(dòng)態(tài)綁定多個(gè)類名方法詳解(:class動(dòng)態(tài)綁定多個(gè)類名)
vue中可以通過:class=""這樣來根據(jù)一定的條件來動(dòng)態(tài)添加class,但是有時(shí)候需要判斷的條件比較多,需要?jiǎng)討B(tài)添加的class也比較多,下面這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)綁定多個(gè)類名(:class動(dòng)態(tài)綁定多個(gè)類名)的相關(guān)資料,需要的朋友可以參考下2022-11-11
VsCode工具開發(fā)vue項(xiàng)目必裝插件清單(推薦!)
對于很多使用vscode編寫vue項(xiàng)目的新手同學(xué)來說,可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于VsCode工具開發(fā)vue項(xiàng)目必裝插件的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue?element-ui如何在el-tabs組件最右側(cè)添加按鈕
這篇文章主要介紹了vue?element-ui如何在el-tabs組件最右側(cè)添加按鈕問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue全局注冊自定義指令防抖解析，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue-cli構(gòu)建項(xiàng)目下使用微信分享功能
這篇文章主要介紹了vue-cli構(gòu)建項(xiàng)目下使用微信分享功能,本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
一次VUE項(xiàng)目中遇到XSS攻擊的實(shí)戰(zhàn)記錄
XSS?攻擊是頁面被注入了惡意的代碼,下面這篇文章主要給大家介紹了一次VUE項(xiàng)目中遇到XSS攻擊的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12
Vue3增加了很多讓人眼前一亮的特征,suspense 組件就是其中之一,對處理異步請求數(shù)據(jù)非常實(shí)用,下面這篇文章主要給大家介紹了關(guān)于Vue3中如何使用異步請求的相關(guān)資料,需要的朋友可以參考下2022-06-06
vue3+vite應(yīng)用中添加sass預(yù)處理器問題
這篇文章主要介紹了vue3+vite應(yīng)用中添加sass預(yù)處理器問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
Vue3進(jìn)階主題Composition API使用詳解
這篇文章主要為大家介紹了Vue3進(jìn)階主題Composition API使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
vue實(shí)現(xiàn)卡片翻轉(zhuǎn)輪播展示
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)卡片翻轉(zhuǎn)輪播展示，同時(shí)在翻轉(zhuǎn)時(shí)切換數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01