用electron將Vue項(xiàng)目打包為window和Mac桌面應(yīng)用 (electron-packager與electron-build)

1.打包準(zhǔn)備

? ? 1.在自己需要打包的vue項(xiàng)目中build項(xiàng)目包出來,這里就不做解釋了
? ? 2.新建一個(gè) exe文件夾 (名稱自己定義)
? ? 3.克隆項(xiàng)目 地址:git clone https://github.com/electron/electron-quick-start
? ??????

?2.配置環(huán)境

? ? 1.cd 進(jìn)入 electron-quick-start 文件夾 npm install 添加依賴 (依賴包60M左右 )

? ? ?2.完成后 將步驟一種build出來的包放入?electron-quick-start 文件夾 如圖
? ??????

? ? 3.修改main.js入口文件,
? ? ? ? 修改前

? ? ? 修改后 這里 的路徑是build出來文件名稱?

? ??????

? ? 4.啟動(dòng)?npm?run?start

? ??????

? ??????????? ? 項(xiàng)目啟動(dòng)完成

3.打包

? ? ? ? 1.使用?electron-packager 方式打包,因?yàn)橐蕾囘€環(huán)境問題 現(xiàn)在只能打出window 版本 MAc版本需要使用另一種方式 。
? ? ? ? ? ? ? ?添加依賴?npm install electron-packager --save-dev?

? ??????????

? ? ? ? 2.修改package.json 中?

"scripts": {

? ? ? "start": "electron .",? ?

? ? ? "packager": "electron-packager ./ VEA_L --platform=win32 --arch=x64 --electron-version=2.0.0 --overwrite"

? }

? ? ? 然后?npm run packager 打包?
? ??????

? ?打包完成?

? ??

? ??VEA_L-win32-x64 中的exe就是執(zhí)行文件?

注 此方法只支持打包 window 和linux 版本 mac版本不支持 (沒找到解決辦法)
? ??2.使用?electron-build?方式打包 支持window 和Mac (mac版本只有在mac os上才可打包完成 )

? ? 添加 依賴? 建議方法一
? ? ? ?方法一? 全局裝?yarn? 環(huán)境? (mac os 自行百度)?

? ??????????????????npm install -g yarn
? ? ? ?????????????安裝 依賴?yarn add electron-builder?--save-dev
? ? ? ? 方法二 npm 安裝?

? ??????????????npm install electron-builder
? ? ? ?修改?package.json 中

? "build": {"appId": "com.xxx.app", "copyright":"LEON", "productName":"亦思辰","mac": {"target": ["dmg","zip"]},"win": {"target": ["nsis","zip"] }},

"scripts": { "start": "electron .",? ? "packager": "electron-packager ./ VEA_L --platform=win32 --arch=x64 --electron-version=2.0.0 --overwrite", "distWin": "electron-builder --win --x64","distMac": "electron-builder --mac --x64","dist": "npm run distWin && npm run distMac"},


? ? 執(zhí)行命令 打出對(duì)應(yīng)環(huán)境包?npm run dist?

? ??

我因?yàn)槭莣indow 所以 window打包成功,macos報(bào)錯(cuò),(用macOs 親測可用 ) 打包完成dist中如下?

注意 完成后 window 會(huì)出現(xiàn) 菜單欄 隱藏需要修改 main.js 如下 就可以解決?



總結(jié):以上的倆種方式都可以打包出exe方式不同,都可以配置Ioc圖標(biāo),這里就不做演示了,有疑問歡迎提意見,共同進(jìn)步。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容