​

1. First of all, we need to install the electron Builder packaging tool

Run CMD as the administrator and enter CNPM install electron- Builder -g to install. Enter the electron builder -v to check whether the installation is successful. The following picture shows the installed effect:

​

2. Use commands to package

For the first time, you need to download the following files (

If you use the command to download yourself, it can be very slow, you know, so you can manually download the files in advance and put them in the appropriate folder before you execute the package command

) :

WinCodeSign:Github.com/electron-us…

Nsis:Github.com/electron-us…

Nsis – resources:Github.com/electron-us…

You can manually download it first, and then decompress its files to the following directories:

WinCodeSign: C: \ Users \ quber \ AppData \ Local \ electron – builder \ Cache \ winCodeSign \ winCodeSign – 2.5.0

Nsis: C: \ Users \ quber \ AppData \ Local \ electron – builder \ Cache \ nsis \ nsis – 3.0.4.1

Nsis – resources: C: \ Users \ quber \ AppData \ Local \ electron – builder \ Cache \ nsis \ nsis – resources – 3.4.1 track

​

Run CMD as an administrator, navigate to the project folder, and enter the following command: CNPM run build

Note that before running the above command, you need to set the build property node configuration in package.json in the project. For details, see the following package.json code. In the command, build in CNPM run build is the name of the build property under scripts in package.json. For details, see the following package.json code.

{" name ":" el_test2 ", "version" : "1.0.1", "description" : "Electron test the second project", "main" : ". / app/index. Js ", "scripts" : { "test": "echo \"Error: no test specified\" && exit 1", "build":"electron-builder --win --x64" }, "keywords": [ "quber" ], "author": "Quber", "license": "ISC", "build": { "productName":"el_test2", "appId": "Quber. el_test2", "copyright":" quber ©20200220", "directories": {"output": "app_file"}, "nsis": {"oneClick": false, "allowElevation": true, "allowToChangeInstallationDirectory": true, "installerIcon": "./app/images/256x256.ico", "uninstallerIcon": "./app/images/256x256.ico", "installerHeaderIcon": "./app/images/256x256.ico", "createDesktopShortcut": true, "createStartMenuShortcut": true, "shortcutName": "el_test_shortcut" }, "win": { "icon": "app/images/256x256.ico", "target": [ { "target": "nsis", "arch": [ "ia32" ] } ] } } }Copy the code

Build attributes are described as follows:

​

For more information, please refer to the official website:www.electron.build/configurati…

The package execution command has the following effect:

​

3. Pack the finished product

We can see that in the app_file folder in the project folder, there is the el_test Setup 1.0.0.exe file and the win-unpacked folder. Where el_test Setup 1.0.0.exe is the installation package, win-unpacked is the non-installation package, you can directly click the executable file inside to run, as shown below:

​

​

​