1. After I use vue-cli to build an electron application, I use vue add electron-builder to add packaging tools. After the installation is successful, there will be two more commands in the script:
Use npm run electron:serve to open the built vue project as a desktop application
Use npm run electron:build to package the built vue project, generate an executable file in exe format, and then install and use it.
2. But the packaging process is full of hardships. Because three tools are used for packaging:
-
electron-v9.0.2-win32-x64.zip and SHASUMS256.txt-9.0.2 where v9.0.2 is the latest version at the moment and can be installed according to the version required by the project. Download address: https://npm.taobao.org/mirrors/electron/ After selecting the corresponding version, download the package suitable for the system, and pull it to the bottom to download the SHASUMS256.txt file.
-
winCodeSign-2.6.0 This is also the version that I am required to download when the packaging command is executed. You can download and install it according to the needs of the project. The download address will be given during the packaging process, I use VScode, crtl+click to go to the corresponding download page. The download waiting time is particularly long.
-
nsis-3.0.4.1 This is also the version that I am required to download when the packaging command is executed, and it can be downloaded and installed as required by the project. The download address will be given during the packaging process, but there is a very high chance of domestic download errors. I just failed to download.
3. Next, explain how to solve it:
-
For electron-v9.0.2-win32-x64.zip and SHASUMS256.txt-9.0.2, I first added Taobao mirror to electron.
Type in the terminal: npm set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
Open the C drive, search for the .npmrc file under your current user, open it with Notepad, and see if the setting is successful.
If you are still worried about the unsuccessful download, just download it directly. Download the two files according to the address in II. 1. After decompression, place it in the C:\Users\Administrator\AppData\Local\electron\Cache directory.
-
For winCodeSign-2.6.0 download failures, most of them are due to network reasons. The speed of the first download on github is also the same speed, but at least the speed is visible and the screen will not report an error. Open the address: https://github.com/electron-userland/electron-builder-binaries/releases to find the version you need.
After downloading, unzip it to a folder with the same name. Then C:\Users\Administrator\AppData\Local\electron-builder\Cache enter this directory, create a new folder named: winCodeSign , and then put the folder just unzipped into this folder.
-
For nsis-3.0.4.1 download fails, most of the network itself, first download at github too turtle speed, but at least see the speed, not full screen error. Open the address: https://github.com/electron-userland/electron-builder-binaries/releases to find the version you need.
After the download is complete, open the zip package, but not all files are required. We need two of these files: nsis and nsis-resources
to extract these two folders. Rename: nsis -> nsis-3.0.4.1 nsis-resources -> nsis-resourcers-3.4.1Then enter C:\Users\Administrator\AppData\Local\electron-builder\Cache into this directory, create a new folder named: nsis , and put the two folders just unzipped into this folder.
At this point, the installation of the three packaged tools has been completed, and return to the project to execute: npm run electron:build to package.
After the packaging is successful, there will be an additional dist_electron folder in the root directory . The packaged files are all in it, including the exe format file. Double-click to execute the installation!
