【Electron】Electron開發入門(五):項目打包

一、安裝 electron-packager

PS:安裝之前,先複製一份package.json文件到./app目錄下,然後改下./app目錄下package.json裏 “main”: “app/main.js”的路徑(去掉app/),不這樣子的話,下面打包的時候會報錯,有的版本識別不了應用路徑。

1、使用命令 npm install --save-dev electron-packager
將electron-package包安裝到在項目下面,
這裏寫圖片描述
安裝完成之後,項目根目錄下面的package.json文件裏,會多出一條electron-package的版本號配置信息
這裏寫圖片描述

二、正式打包
有兩種方法:
1、直接使用命令打包,electron-packager的打包基本命令是:

electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

命令說明:
* location of project:項目所在路徑
* name of project:打包的項目名字
* platform:確定了你要構建哪個平臺的應用(Windows、Mac 還是 Linux)
* architecture:決定了使用 x86 還是 x64 還是兩個架構都用
* electron version:electron 的版本
* optional options:可選選項

命令比較長,每次要是都用這個命令來打包會很煩,可以使用第二種方法;

2、首先在項目根目錄下面的 package.json 裏添加代碼,
"packager": "electron-packager ./app HelloWorld --all --out ./OutApp --version 1.4.0 --overwrite --icon=./app/img/icon/icon.ico"

PS:這裏要注意,字段裏的 項目名字,version,icon路徑要改成自己的;
具體添加位置如圖,
這裏寫圖片描述

然後,在使用命令 npm run-script packager
這裏寫圖片描述

最後,打包完成之後如圖
這裏寫圖片描述
運行對應包下的.exe文件,就可以看到我們的應用了。

注:如需修改electron.exe可執行程序的詳細信息:
這裏寫圖片描述
可以使用resource-hacker方法:
教程:https://newsn.net/say/resource-hacker.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章