Electron-packager 打包前端为应用程序

做棵大树
Lepaskan: 2020-05-13 09:14:17
asal
145 orang telah melayarinya

最近在做一个匿名投票系统,前端使用 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
Salin selepas log masuk

安装界面如下图

Electron-packager 打包为应用程序

加入配置

以下附上我的配置信息以供参考,具体的配置信息和属性可以查看官方文档

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": {  }}
Salin selepas log masuk

运行命令进行打包

npm run build
Salin selepas log masuk

执行即可,会在 dist 目录下生成目标文件

Atas ialah kandungan terperinci Electron-packager 打包前端为应用程序. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
1
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!