Electron-packager packages the front end into an application

Recently I am working on an anonymous voting system. The front-end is developed using Vue. I want to try Electron for the moment to package the client.

After that, I chose to use electron-builder for packaging, because after trying it, I found that the packaged file size of electron-packager was larger, and electron- builder has a relatively small packaging volume and supports more packaging formats, so electron-builder was finally chosen for packaging.

Preparation work

I personally did not directly connect electron to the vue project, but packaged it in electron's official quick start project. Click to view the electron-quick-start warehouse. This repository contains packaged basic settings to facilitate users to get started quickly.

The specific steps can be summarized as the following steps

1. InstallationElectron-builder
2. Clone quick start repositorygit clone https: //github.com/electron/electron-quick-start.git
3. Packaging vue project
4. Copy the packaged vue target file toElectronquick start Under the project
5. Add personalized configuration and package

Install electron-builder

In order to facilitate future use, I directly performed the global installation here. Everyone Friends can choose different installation methods according to actual needs:

npm install electron-builder -g

The installation interface is as shown below

Add configuration

Attached below is mine The configuration information is for reference. For specific configuration information and properties, you can view the Official Document

##package.json

{  "name": "electron-quick-start",  "version": "1.0.0",  "author": "肖尊严",  "copyright": "Copyright © 2020 肖尊严",  "description": "基于同态加密算法的匿名投票系统",  "main": "main.js",  "scripts": {    "start": "electron .",    "build": "electron-builder --win --x64"  },  "build": {    "appId": "cn.beatree.anonvote",    "productName": "AnonVote 匿名投票系统",    "mac": {      "icon": "favicon.ico",      "target": ["dmg","zip"]    },    "win": {      "icon": "favicon.ico",      "target": ["nsis","zip", "portable"]    }  },  "repository": "https://github.com/electron/electron-quick-start",  "keywords": [    "Electron",    "quick",    "start",    "tutorial",    "demo"  ],  "author": "GitHub",  "license": "CC0-1.0",  "devDependencies": {    "electron": "^6.1.1"  },  "dependencies": {  }}

Run the command for packaging

npm run build

Execution That’s it, the target file will be generated in the dist directory

The above is the detailed content of Electron-packager packages the front end into an application. For more information, please follow other related articles on the PHP Chinese website!