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

安装 Electron

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

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

下载 Demo

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

1
2
3
4
5
$ git clone https://github.com/electron/electron-quick-start

$ cd electron-quick-start

$ npm install && npm start

打包

打包 OSX App

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

1
2
3
4
$ 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 {
"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