Electron-packager 打包前端為應用程式

最近在做一個匿名投票系統，前端使用 Vue 進行開發，暫時就想嘗試下Electron打包客戶端。

之後我選擇採用electron-builder 來打包，因為經過嘗試，發現electron-packager 打包後的檔案體積較大，而electron- builder 打包體積相對較小，且支援更多的打包格式，所以最終選擇了electron-builder進行打包。

準備工作

我個人並沒有在 vue 專案中直接接入 electron ，而是在 electron 官方的快速啟動專案中進行了打包。點擊查看electron-quick-start倉庫。此倉庫包含了打包進行的基礎設置，方便使用者快速上手。

具體步驟可以概括為以下幾步

1. 安裝Electron-builder
2. 複製快速啟動倉庫git clone https: //github.com/electron/electron-quick-start.git
3. 打包vue 專案
4. #複製打包後的vue 目標檔案到Electron快速啟動專案下
5. 增加個人化配置，進行包裝

安裝electron-builder

為了方便日後的使用，這裡我直接進行了全域的安裝，各位朋友可以根據實際需求選擇不同的安裝方式：

npm install electron-builder -g

安裝介面如下圖

#加入設定

以下附上我的配置資訊以供參考，具體的配置資訊和屬性可以查看官方文件

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": {  }}

運行命令進行打包

npm run build

執行即可，會在dist 目錄下產生目標檔

以上是Electron-packager 打包前端為應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！