Electron-packager打包为应用程序

文章目录[隐藏]

准备工作
安装 electron-builder
加入配置
运行命令进行打包

最近在做一个匿名投票系统，前端使用 Vue 进行开发，临时就想尝试下Electron打包客户端。

之后我选择采用 electron-builder 进行打包，因为经过尝试，发现 electron-packager 打包后的文件体积较大，而 electron-builder 打包体积相对较小，且支持更多的打包格式，所以最终选择了electron-builder进行打包。

准备工作

我个人并没有在 vue 项目中直接接入 electron ，而是在 electron 官方的快速启动项目中进行了打包。点击查看electron-quick-start仓库。该仓库中包含了打包进行的基础设置，方便用户快速上手。

具体步骤可以概括为以下几步

安装Electron-builder
克隆快速启动仓库 git clone https://github.com/electron/electron-quick-start.git
打包 vue 项目
复制打包后的 vue 目标文件到Electron快速启动项目下
增加个性化配置，进行打包

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