# Electron安装打包详细介绍

**Repository Path**: samphin/electron-app

## Basic Information

- **Project Name**: Electron安装打包详细介绍
- **Description**: 使用 electron 创建简单的桌面应用程序，包括打包应用程序及生成exe安装程序。electron 是使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。
- **Primary Language**: JavaScript
- **License**: MulanPSL-1.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 8
- **Created**: 2023-02-11
- **Last Updated**: 2023-02-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# electron
使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序，兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。    
[点击前往electron官网](https://www.electronjs.org/)

 **安装完electron后，可直接下载本项目在里面进行修改，也可自行百度创建electron项目** 


## 安装 electron
#### 1.安装 nodejs
Electron 基于 Chromium 和 Node.js，因此先安装 nodejs    
查看 nodejs 版本(也可查看是否安装了nodejs)：`node -v`    
查看 npm 版本：`npm -v`    
[node下载地址](http://nodejs.cn/download/)    
[node安装配置](https://www.runoob.com/nodejs/nodejs-install-setup.html)
#### 2.安装 electron
在项目中安装：`npm install electron@latest --save-dev`    
指定electron版本安装：`npm install electron@10.1.5 --save-dev`    
也可全局安装：`npm install electron -g`    
安装比较慢的话也可使用淘宝镜像 cnpm 安装    
查看electron版本：`electron --version` 或 `electron -V`


## 安装依赖(下载本项目后)
```
npm install
```

## 启动项目
```
npm start
```

## 打包

### 使用 electron-packager 打包
#### 1.安装 electron-packager 执行命令：`npm install electron-packager`
#### 2.最简单的打包命令：`electron-packager .`
#### 3.配置打包参数
[点击查看配置详细参数](https://electron.org.cn/packager/api.html)    
基本命令：`electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --electron-version=<electronVersion> --icon=<icon> --out=<out> --extra-resource=<extraResource> --asar --app-version=<version> [optional flags...]`
- sourcedir：项目源文件所在路径（唯一的必须参数）
- appname：项目名称
- platform：要构建哪个平台的应用（Windows、MacOS 或是 Linux）
- arch：系统类型，使用 x86(ia32) 还是x64
- electronVersion：可以置顶 electron 的版本
- icon：打包图标，windows 系统使用 ico 后缀图标，macOS 系统使用 icns 后缀图标
- out：打包文件输出目录
- extraResource：需要打包的外部资源
- version：应用程序的版本
- optional：其它可选项
- asar：表示加密打包，如果不使用打包后可以看到源码
#### 4.在 package.json 文件中配置打包
```
"scripts": {
    "start": "electron .",
    "package": "electron-packager . testApp --platform=win32 --arch=ia32 --icon=./icon.ico --out=./out --asar --app-version=1.0.0",
    "package:mac": "electron-packager . testApp --platform=darwin --arch=x64 --icon=./icon.icns --out=./out --asar --app-version=1.0.0",
}
```
#### 5.执行打包命令
在windows系统下只能打 windows 包，不能打 macOS 包。    
打包命令：`npm run package` 或 `npm run package:mac`

执行完命令后，在项目根目录 out 文件夹下会生成一个应用程序文件夹，打开文件夹里面包含 .exe 文件，点击运行 exe 文件，没有报错则说明打包成功。
#### 6.打包成安装文件
这里我使用 NSIS(Nullsoft Scriptable Install System) v2.51版本打包成安装文件。
1. 下载安装 NSIS。可自行网上下载(不保证与后面步骤一致)，也可[点击阿里云盘下载](https://www.aliyundrive.com/s/XDcFpbXSK4P)，或[点击百度网盘下载](https://pan.baidu.com/s/1S5RMtOJxYGE7EsVLlw9BdA)，提取码：ajax
2. 安装完成后选择 HW VNISEdit，出现脚本编辑器，选择 文件-新建脚本:向导，点击下一步。
3. (1/8)依次填写名称、版本(应用版本号)、出版人(应用程序的发布者)和程序网站，出版人和网站没有可不填，其它默认；点击下一步
4. (2/8)修改应用图标和安装包名，程序语言默认是勾选中文的，如果有其他语言可勾选选择；点击下一步
5. (3/8)可直接跳过；点击下一步
6. (4/8)授权文件，一般用于安装前勾选的协议，没有协议可将授权文件删掉；其它默认即可；点击下一步
7. (5/8)添加应用文件：先把默认的两个删掉，再添加之前使用electron-packager打包后的.exe文件，然后添加使用electron-packager打包后的整个文件夹，注意要把包含子目录勾选上，确定；点击下一步        
![(5/8)删除默认图片](https://images.gitee.com/uploads/images/2020/1126/162926_887fae48_1936092.jpeg "1606378815(1).jpg")![(5/8)选择exe文件](https://images.gitee.com/uploads/images/2020/1126/163016_16235939_1936092.jpeg "1606378921(1).jpg")![(5/8)选择应用文件夹](https://images.gitee.com/uploads/images/2020/1126/163041_3cdaf32e_1936092.jpeg "1606379005(1).jpg")
8. (6/8)自定义选择是否在开始菜单创建文件夹，其中创建互联网快捷方式在于上面(1/8)中是否填写了程序网站；点击下一步
9. (7/8)可直接跳过；点击下一步
10. (8/8)修改解除安装程序图标，默认与安装图标相同；点击下一步
11. 勾选保存脚本，方便下载直接运行脚本；点击完成，回到脚本编辑器；
12. 修改脚本，如**修改安装包名(带年月日)**、**修改默认安装路径**、**设置开机启动**、**设置卸载干净(默认卸载时部分文件未删除)**、**设置安装前检测(检测是否正在安装、是否已经安装、是否正在运行)** 和 **设置卸载前检测(检测是否正在运行)**；    
 _**[点击查看详细修改说明](https://gitee.com/lunc9932/electron-app/blob/master/build/NSIS%E8%84%9A%E6%9C%AC%E4%BF%AE%E6%94%B9%E8%AF%B4%E6%98%8E.md)**_ 
13. 在菜单栏选择 NSIS(N)-编译并运行，大概等待2分钟左右(根据项目大小)，运行完成，运行完成后会弹出安装程序，安装文件在之前保存的脚本同级目录下；
[点击查看详细脚本文件](https://gitee.com/lunc9932/electron-app/blob/master/build/testApp.nsi)


### 使用 electron-builder 打包
#### 1.安装 electron-builder 执行命令：`npm install electron-builder`
#### 2.配置 build 参数
[点击查看配置详细参数](https://www.electron.build/configuration/configuration)    
[配置详细参数(部分已翻译中文)](https://blog.csdn.net/qq_38830593/article/details/89843722)
```
"build":{
    "appId":"com.test.app",
    "productName":"testApp",    //项目名
    "directories":{
        "buildResources":"build",    //默认资源文件夹，打包时该文件不会被打包
        "output":"build"    //打包输出文件夹
    },
    "win":{
        "target":[{
            "target":"nsis",
            "arch":["ia32","x64"]    //打出32bit+64bit的包(包体积较大，不建议，一般只选择一个)
        }],
        "icon":"build/logo/icon.ico",
        "asarUnpack":["build/**","README.md"]    //不会被压缩进app.asar的资源
    },
    "mac":{
        "icon":"build/logo/icon.icns"
    },
    "nsis":{
        "oneClick":false,    //是否一键安装
        "allowElevation":true,    //是否允许请求提升
        "allowToChangeInstallationDirectory":true,    //允许修改目录
        "installerIcon":"build/logo/icon.ico",    //安装图标
        "uninstallerIcon":"build/logo/icon.ico",    //卸载图标
        "installerHeaderIcon":"build/logo/icon.ico",    //安装时头部图标
        "createDesktopShortcut":true,    //是否创建桌面图标
        "createStartMenuShortcut":true,    //是否创建开始菜单图标
        "shortcutName":"testApp",    //开始菜单名称
        "include":"build/script/installer.nsh"    //自定义nsis脚本
    }
}
```
 :exclamation: _注意在将上面配置复制到配置文件后，需要将注释删掉_ 
#### 3.在 package.json 文件中配置打包
```
"scripts": {
    "start": "electron .",
    "build": "electron-builder",
    "build:dir": "electron-builder --dir",    //不会生成安装程序，一般用于测试打包
    "build:win64": "electron-builder --win --x64",
    "build:mac": "electron-builder --mac"
}
```
#### 4.执行打包命令
与 electron-packager 一样，在windows系统下只能打 windows 包，不能打 macOS 包。
打包命令：npm run build 或 npm run build:mac

执行完命令后，在项目根目录 build 文件夹下会生成一个应用程序文件夹及安装程序，如果使用 npm run build:dir 命令打包，则不会生成安装程序，这样打包速度快，一般用于测试，只会生成应用程序文件夹，打开文件夹里面包含 .exe 文件，点击运行 exe 文件，没有报错则说明打包成功。