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