Electro-packager는 프런트 엔드를 애플리케이션에 패키징합니다.

최근에는 Vue를 사용하여 익명 투표 시스템을 개발하고 있습니다. 임시로 클라이언트를 Electron패키징해 보고 싶습니다.

그 후 패키징에는 electron-builder를 사용하기로 결정했습니다. 사용해 본 결과 electron-packager로 패키징한 후의 파일 크기가 더 크고, electron-builder 패키징 용량이 상대적으로 작고 더 많은 패키징 형식을 지원하므로 패키징을 위해 마침내 electron-builder를 선택했습니다. 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 프로젝트에서 Electron에 직접 접근하지 않고, Electron의 공식 Quick Start 프로젝트에 패키징했습니다. electron-quick-start
창고. 이 저장소에는 사용자가 빠르게 시작할 수 있도록 기본 설정이 패키지로 포함되어 있습니다.
4. 구체적인 단계는 다음 단계로 요약할 수 있습니다.
설치
5. Electron
-builder

빠른 시작 저장소 복제git clone https://github.com/electron/electron-quick-start .git

Package vue 프로젝트

패키지된 vue 대상 파일을

Electron

quick start 프로젝트

에 복사하세요. 개인화된 구성 및 패키지 추가

electron-builder 설치향후 사용을 위해 여기에서 직접 수행했습니다. 전역 설치 친구는 실제 필요에 따라 다른 설치 방법을 선택할 수 있습니다.

npm install electron-builder -g

설치 인터페이스는 아래와 같습니다

구성 추가🎜🎜내 구성 정보는 참조용으로 아래에 첨부되어 있습니다. 특정 구성 정보 및 속성은 다음과 같습니다. beview🎜공식 문서🎜🎜🎜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": {  }}

🎜package🎜

npm run build

🎜명령어를 실행하세요🎜rrreee🎜실행만 하면 dist 디렉터리에 대상 파일이 생성됩니다🎜

위 내용은 Electro-packager는 프런트 엔드를 애플리케이션에 패키징합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!