electron 將現有vue項目改成支持electron桌面端應用


這里以我的一個項目為例:

https://gitee.com/makalochen/think-php5.1_vue2.x_-base-admin

項目運行如圖

image-20210205094546418

將這個項目改成支持electron

安裝electron-builder

我們需要知道,electron-builder和electron-packager基本類似,不過builder打包完成的是安裝包,而packager打包完成的是可執行文件,packager里面有項目源碼,builder里面則是編譯后的。這可能是兩者的最大差別。

進入項目根目錄,執行

vue add electron-builder

image-20210205094945331

如果出現這個選擇y,這是告訴當前存儲庫有未提交的更改,問你是否繼續

image-20210205095126591

這是問你選擇electron那個版本,我們直接選擇最新版

image-20210205095441540

仔細看完成之前有句提示,是說檢測到您正在使用Vue路由器。它必須在哈希模式下工作才能在electron中工作

也就是說路由必須改成

image-20210205095622064

這點要注意

測試

運行web

npm run serve

image-20210205095909157

運行electron 客戶端

npm run electron:serve

image-20210205100220847

沒啥問題

打包成桌面應用

執行

npm run electron:build

到當前項目目錄下的dist_electron

image-20210205104928799


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM