1.打包準(zhǔn)備
? ? 1.在自己需要打包的vue項目中build項目包出來其爵,這里就不做解釋了
? ? 2.新建一個 exe文件夾 (名稱自己定義)
? ? 3.克隆項目 地址:git clone https://github.com/electron/electron-quick-start
? ??????
?2.配置環(huán)境
? ? 1.cd 進入 electron-quick-start 文件夾 npm install 添加依賴 (依賴包60M左右 )
? ? ?2.完成后 將步驟一種build出來的包放入?electron-quick-start 文件夾 如圖
? ??????
? ? 3.修改main.js入口文件宵喂,
? ? ? ? 修改前
? ? ? 修改后 這里 的路徑是build出來文件名稱?
? ??????
? ? 4.啟動?npm?run?start
? ??????
? ??????????? ? 項目啟動完成
3.打包
? ? ? ? 1.使用?electron-packager 方式打包付鹿,因為依賴還環(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í)行命令 打出對應(yīng)環(huán)境包?npm run dist?
? ??
我因為是window 所以 window打包成功,macos報錯得滤,(用macOs 親測可用 ) 打包完成dist中如下?
注意 完成后 window 會出現(xiàn) 菜單欄 隱藏需要修改 main.js 如下 就可以解決?
總結(jié):以上的倆種方式都可以打包出exe方式不同奶稠,都可以配置Ioc圖標(biāo)俯艰,這里就不做演示了,有疑問歡迎提意見锌订,共同進步竹握。