Electron将Web页面打包应用到各个系统 - 附打包命令实例图文

一、 插件安装

npm install electron-packager --save-dev

二、 electron-packager 介绍

关于 electron-packager 的配置，简单介绍一下。

语法：electron-packager <sourcedir> <appname> –-platform=<platform> –-arch=<arch> [optional flags…]

• sourcedir 资源路径，在本例中既是 ./
• appname 打包出的exe名称
• platform 平台名称（windows是win32）
• arch 版本，本例为x64
• [optional flags…] 配置项选填，可以设置二进制打包等，默认没有这些

三、打包命令实例

修改配置文件 package.json

"scripts": {
    "start": "electron .",
    "start2": "electron . --enable-logging",
    //开启主线程 log
	"electron_build": "electron-packager ./ helloworld --platform=win32 --arch=x64  --out=./app --app-version=1.0.0 --overwrite  --icon=./myicon.ico"
	// 注意事项 electron-packager ./ 会取当前目录下package.json文件（即当前文件）中 main 值指向的入口
  }

• 打包 Linux：--platform=linux
• 打包 MacOS：--platform=darwin

三、 运行打包命令

npm run electron_build

• 打包 Windows 应用
  
• 打包 Linux 应用

四、 运行打包文件测试

• 打包成 Windows 下的 EXE 文件：
  在文件目录下可以找到callcenter-win32-x64文件夹
  双击运行.exe文件就能看到熟悉的界面啦
  
• 打包成 Linux 下应用：
  运行徐修改主程序的权限：sudo chmod 777 pma
  然后运行主程序：./pma