preface
For work needs, use Electron to develop a desktop application.
There are two reasons for not using scaffold for projects similar to electron- Vue:
① Small application and low complexity;
② Packing volume;
③ Consolidate the foundation, write the original directly.
Here’s a joke: the reliance on frameworks has led most developers today to have poor basic skills.
The body of the
For the packaging part, I referred to the electorn website’s tutorial and used Electorn Forge to pack it. However, as the official website said, this is the fastest way to pack, which is simple and easy to use, and has a low degree of configuration. I checked the official website documents, and many of the functions I expected did not provide configuration options, so I considered giving up. Then try the Electron Builder packing, which is described on electorn’s official website as follows:
Electron Builder is a complete Electron application packaging and distribution solution dedicated to the integrated experience of software development.
Now all I can say is yes, it did work!
Put my package.json file directly (note that you can’t write comments in json files, I’m just explaining it below) :
{
"name": "rabbit"."version": "1.0.0"."description": "rabbit"."main": "main.js"."scripts": {
"start": "electron ."."win32": "electron-builder --win --ia32"."win64": "electron-builder --win --x64"."mac": "electron-builder --mac"."linux": "electron-builder --linux"
},
"author": "rabbit"."license": "MIT"."devDependencies": {
"electron": "^ 13.1.7"."electron-builder": "^ 22.11.7"
}
"build": {
"productName": "rabbit"."appId": "com.rabbit.client"."copyright": "© The Great Rabbit God 2021"."directories": {
"output": "dist"
},
"nsis": {
"oneClick": false."allowElevation": true."allowToChangeInstallationDirectory": true.// Allow users to customize the installation directory
"installerIcon": "icon.ico"."uninstallerIcon": "icon.ico"."installerHeaderIcon": "icon.ico"."createDesktopShortcut": true."createStartMenuShortcut": true."shortcutName": "rabbit"
},
"win": {
"icon": "icon.ico"."requestedExecutionLevel": "requireAdministrator".// Obtain administrator permission
"target": [{"target": "nsis"}]."extraFiles": { // After installation, the source files in the from folder will be copied to the to folder in the installation directory
"from": "./from/"."to": "to"}},"dmg": {
"contents": [{"x": 410."y": 150."type": "link"."path": "/Applications"
},
{
"x": 130."y": 150."type": "file"}},"mac": {
"icon": "html/icon.ico"
},
"linux": {
"icon": "html/icon.ico"}}}Copy the code
Generally, this file is configured and packaged without any problems. While this configuration is that I can in a 64 – bit machines can play a 32 bit package, because do not understand principle of packaging, so carefully, I am afraid that due to the 64 – bit machines with 32 bit environment and hit something different, leading to the final package problems after put into production, maybe you think no problem, but look at the picture to speak:
Obviously, they’re all different sizes, and they’re missing something and they’re adding something, I don’t know.
So I found a 32-bit machine to pack it, as shown in the picture above. Unfortunately, the 32-bit machine is A Windows 7 operating system, at which point the problem appears:
First problem: Node environment installation
Win7 does not support installation.
This installation package is too new to be accepted by Windows 7, so you need to find a version of Windows 7 to install it.
But don’t be too low, because the new version will always have more stuff. The node-v12.22.4-x86.msi installation package is supported by v12.22.4.
Second problem: NPM Error
After installing the Node environment, execute the NPM run win32 package and report NPM Error. The console says: There may be a problem with your NPM version.
If the NPM version is not suitable, run NPM -v to check the NPM version number. Considering that NPM run win32 actually executes the command “electric-Builder –win –ia32”, a large part of the reason is that the dependent package “electric-Builder” does not match the running platform. I scrolled through the electron Builder module in node_modules, as shown below:
This module specifies “engines”: {“node”: “>=14.0.0”}, which means that you need to run node on a platform greater than or equal to V14.0.0, and I installed V12.22.4, so the packaging failed.
The third problem: healthNodeJS
The version?
Instead of descending the NodeJS version, I chose to descend the electron Builder version, which I eventually found was V22.11.1.
Thought everything was ok, finally can successfully pack, but still failed, execute the command and there are download problems.
Fourth problem: download problem
This problem I directly carried, because it did solve my problem, proved useful.
The following is an excerpt from the Electron builder package
-
NPM download problem
Because NPM is slower in China. The electron-V.xxxx.zip download fails. If these things are packaged for the first time, you need to download the corresponding support files for the ELECTRON version. There are two solutions
- Set the mirror: find it in User on drive C
.npmrc
File. And then I’m going to add the following line, which is sometimes not very useful
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ copying codeCopy the code
- Directly go to taobao image file library to find the corresponding file and download it, put it into the designated directory, Electron TaobaoMirror address. After downloading, place it in the specified file. For general documents, the address is
C:\Users\Administrator\AppData\Local\electron\Cache
. For example, I want to download version 1.8.4electron
, then find the file under the image and put it in the specified folder.
(If it is executing
npm install
Download not down) directly inTaobao mirrorDownload the corresponding version of the ZIP and drop it into C:\Users\YourUserName. ElectronThat solves the problem, simple and violent.
- Set the mirror: find it in User on drive C
-
NSIS download problem
If you want to play NSIS package, you need to download NSIS -resources- XXX etc package. After the above experience, we know what is missing and fill in what is missing. Through the error log, we can get the version we want to download. In general, the error usually shows the github download address, and directly click the link to download. But the location is different this time. Since this is the support environment for the electron Builder, we will place it under C:\Users\Administrator\AppData\Local\electron- Builder \cache\nsis.
In general, the way to solve these problems is to take what is missing.
After solving the download problem, finally packaged successfully!!
conclusion
This paper seems to be just a record of the packaging problem, but in fact, it is a way to solve the problem, how to find and verify the problem, step by step to solve, ability is improved step by step in the exploration.