溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“怎么使用electron打包vue項目”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么使用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項目”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
