1. 程式人生 > >利用electron-packager打包exe程式

利用electron-packager打包exe程式

一、安裝 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>
  • 1

命令說明: 
* 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檔案,就可以看到我們的應用了。

轉載自http://blog.csdn.net/arvin0/article/details/52690023

引數設定可參考下面,也是轉載自某網友

{
  "name": "hosts",
  "version": "2.0.1",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "concurrently \"NODE_ENV=dev electron .\" \"webpack-dev-server --inline --hot --port 8080\"",
    "packageDarwin": "electron-packager . 'Hosts' --platform=darwin --arch=x64 --icon=hosts.icns --out=./dist --asar --app-version=2.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config*|node_modules)\"",
    "packageWin": "electron-packager . 'Hosts' --platform=win32 --arch=x64 --icon=hosts.ico --out=./dist --asar --app-version=2.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config.js|node_modules)\"",
    "packageLinux": "electron-packager . 'Hosts' --platform=linux --arch=x64 --out=./dist --asar --app-version=2.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config.js|node_modules)\"",
    "prepackage": "rm -rf build && webpack --config webpack.config.prod.js && rm -rf dist",
    "package": "npm run packageDarwin && npm run packageWin && npm run packageLinux"
  },
  "author": "Howard.Zuo",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^6.7.6",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-plugin-component": "^0.9.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "concurrently": "^3.4.0",
    "css-loader": "^0.26.2",
    "electron-packager": "^8.5.2",
    "electron-prebuilt": "^1.4.13",
    "file-loader": "^0.10.1",
    "html-webpack-plugin": "^2.28.0",
    "postcss-loader": "^1.3.3",
    "postcss-nested": "^1.0.0",
    "postcss-simple-vars": "^3.0.0",
    "style-loader": "^0.13.2",
    "vue-hot-reload-api": "^2.0.11",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^11.1.3",
    "vue-style-loader": "^2.0.3",
    "vue-template-compiler": "^2.2.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  },
  "dependencies": {
    "element-ui": "^1.2.3",
    "hostile": "^1.3.0",
    "sudo-prompt": "^6.2.1",
    "vue": "^2.2.1"
  }
}