Electron-打包

2019-06-04

Electron 真是挺方便，此次项目它将我的 vue.js 的项目打包了起来。
认真看官方手册，学习一手资料。学到了学到了。:)

安装 Electron

1 2	$ npm i electron -g # 全局安装 electron $ npm i electron-packager -g # 安装打包工具

使用 cnpm 或 yarn 可能会快一些，😁。

下载 Demo

electron的simple demo中是一个基本的electron目录结构，下载下来后将自己编译好的放进去即可。

$ git clone https://github.com/electron/electron-quick-start

$ cd electron-quick-start

$ npm install && npm start

打包

打包 OSX App

在mac下打包自己系统用的app不用装别的环境了，上面两个就OK咯。

$ electron-packager ./ i-Class --icon=logo.icns
# ./ 是项目目录
# i-Class 是打包好后的 app 名
# --icon 是 app 的logo，不加这个默认生成的app使用的是 electron 的logo。

mac 图标格式为 .icns ，打包 Windows 应用程序图表格式应为 .ico。

打包 Windows App

刚开始在 pd 虚拟机中跑 Windows 10 来打包，但是虚拟机对于文档权限总是有各种各样的问题，最后看了官方手册后……以后还是看使用说明再开始上手吧，嘿嘿。

在 mac 下是可以编译 Windows 下的应用程序的，需要下载个 wine。

1	$ brew install wine

然后执行打包命令，他将会自动下载对应平台的打包工具。

1
2
3

$ electron-packager ./ i-Class --platform=win32 --arch=x64 --icon=logo128.ico
# --platform=win32
# 平台：darwin, linux, mas, win32

当然，总是输入这一大堆命令会有些麻烦，配置下 package.json：

 {
      "name": "zzh",
      "version": "0.0.1",
      "description": "a simple application",
      "main": "main.js",
      "scripts": 
      {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "electron .",
        "package": "electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=1.0.0 --electron-version=1.4.13"
      },
      "author": "zzh",
      "license": "ISC"
}

出错解决

1	unable to determine electron version. Please specify an Electron version.

用 electron-package –help 查看，确实有一个属性是 –electron-version，然后加上对应的版本即可。

参考：
electron-packager官方文档
 用Electron开发桌面应用
 用 Electron 打造跨平台前端 App