electron打包vue項目的方法步驟

創建項目

點擊這裡

1、在項目目錄下運行命令：vue add electron-builder
2、electron-builder添加完成後會選擇electron版本，直接選擇最新版：

vue add electron-builder下載electron會下載失敗，使用淘寶鏡像下載:cnpm i electron

1、下載完成後嘗試運行electron窗體：npm run electron:serve

2、窗體運行成功：

1、運行打包命令:npm run electron:build

2、打包時由於會在github下載包，國內網絡一般會失敗，需要手動下載nsis與winCodeSign(網絡允許的話你也可以自己到github下載，這裡我下載分享出來瞭)，點擊這裡下載，提取碼：1uq8，解壓後將nsis與winCodeSign復制(替換)到以下目錄：

3、復制文件後再次運行打包命令即可打包成功：

4、打包完成後，項目目錄下會多出一個dist_eletron，打包出的exe即在其中，此exe需安裝後使用：

5、但在dist_eletron的win-unpacked下也會有與項目同名的exe，此exe無需安裝即可運行，但依賴同級目錄下的文件，不能直接單獨使用:

1、到這裡其實打包就已經成功完成瞭，但你打開exe後會發現與在項目中窗體運行不一樣，或者直接白屏，這是由於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、打包成功：

到此這篇關於electron打包vue項目的方法步驟的文章就介紹到這瞭,更多相關electron打包vue項目內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！