Electron环境搭建&打包桌面应用exe

目录

 

一、安装node.js

二、安装淘宝镜像的包命令行管理工具cnpm

三、安装electron

四、安装打包工具electron-packager

五、使用electron-packager打包成exe

---

一、安装node.js

到http://nodejs.cn/download/下载安装最新版本的node.js。默认安装即可。
（npm是node的模块管理工具，由node附带安装）

注：windows 7系统安装最新版可能会安装失败。解决办法是安装旧版本node.js

https://npm.taobao.org/mirrors/node/v12.18.4/node-v12.18.4-x86.msi

https://npm.taobao.org/mirrors/node/v12.18.4/node-v12.18.4-x64.msi

安装完成后，使用node -v检查nodejs是否安装成功：

二、安装淘宝镜像的包命令行管理工具cnpm

1.看一下npm仓库地址：

npm get registry

得到 https://registry.npmjs.org/
2.建议把npm的仓库切换到国内taobao仓库。因为可能的GFW问题（不然会下载很慢很慢，也可能下载失败）。执行下面的命令：

npm config set registry "https://registry.npm.taobao.org/"

3.安装cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

三、安装electron

npm install -g electron

查看electron是否安装成功可通过命令 electron -v 查看。

注：使用electron调用C++ DLL，提示重新安装electron时，如果 npm install electron --save-dev 安装失败，则使用 cnpm install electron --save-dev 进行安装。

 

四、安装打包工具electron-packager

安装electron-packager工具：

npm install -g electron-packager

五、使用electron-packager打包成exe

注：电脑需安装git

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

cd electron-quick-start 

npm install 

1.直接运行

npm start

2.使用electron-packager打包成exe

(1)最简打包

cd到electron-quick-start文件夹，执行如下最简单的命令，即可开始打包。

electron-packager .

打包成功后查看electron-quick-start-win32-x64文件夹中的输出文件：

点击其中的exe，即可启动桌面程序：

(2) 直接在命令中设置参数打包

执行命令electron-packager --help或者访问官网查看所有可配置参数。
基本命令：

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

命令说明：

• sourcedir：项目源文件所在路径（唯一的必须参数）
• appname：项目名称（直接使用package.json文件中的name属性更方便）
• platform：要构建哪个平台的应用（Windows、Mac 还是 Linux）
• arch：决定了使用 x86 （ia32）还是 x64（x64），还是两个架构都用
• optional options：可选选项

一个命令举例：

electron-packager . fukaiitapp --out fukaiitapp --arch=x64 --overwrite --ignore=node_modules

说明：

electron-packager . 应用名称 --out 输出文件夹 --arch=x64 --overwrite --ignore=node_modules

效果基本同最简打包

(3) 在package.json文件中配置参数打包

命令较长，每次打包都需要输入很麻烦，可以把命令配置到package.json文件中scripts属性中：

"scripts": {
  "start": "electron .",
  "packager": "electron-packager . fukaiitapp --out fukaiitapp --arch=x64 --overwrite --ignore=node_modules"
},

然后便可运行命令cnpm run-script packager进行打包：

看效果与上面直接在命令中设置参数的方式相同，但经错误提示发现，使用这种方式时，package.json文件中的name属性不能含有中文和空格等特殊字符。