最近、Vueを使ってフロントエンドを開発しています。クライアントを一時的にElectronパッケージ化してみたいと思っています。
その後、パッケージ化には electron-builder
を使用することにしました。試してみたところ、electron-packager
でパッケージ化した後のファイル サイズが大きくなったためです。 electron-builder
パッケージ化ボリュームは比較的小さく、より多くのパッケージング形式をサポートしているため、最終的にパッケージ化には electron-builder
を選択しました。 electron-builder
进行打包,因为经过尝试,发现 electron-packager
打包后的文件体积较大,而 electron-builder
打包体积相对较小,且支持更多的打包格式,所以最终选择了electron-builder
进行打包。
我个人并没有在 vue 项目中直接接入 electron ,而是在 electron 官方的快速启动项目中进行了打包。点击查看electron-quick-start仓库。该仓库中包含了打包进行的基础设置,方便用户快速上手。
具体步骤可以概括为以下几步
git clone https://github.com/electron/electron-quick-start.git
クイックスタートリポジトリのクローンを作成しますgit clone https://github.com/electron/electron-quick-start .git
vue プロジェクトをパッケージ化
パッケージ化された vue ターゲット ファイルを Electron
クイック スタート プロジェクトにコピーします パーソナライズされた構成とパッケージを追加します今後の使用のために、electron-builder をインストールします
ここでは、私が直接実行しましたグローバル インストールでは、実際のニーズに応じてさまざまなインストール方法を選択できます:
npm install electron-builder -g
{ "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
以上がElectron-packager はフロントエンドをアプリケーションにパッケージ化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。