ホームページ >ウェブフロントエンド >フロントエンドQ&A >Electron-packager はフロントエンドをアプリケーションにパッケージ化します

Electron-packager はフロントエンドをアプリケーションにパッケージ化します

做棵大树
做棵大树オリジナル
2020-05-12 15:28:57202ブラウズ

最近、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 の公式クイック スタート プロジェクトにパッケージ化しました。クリックして電子クイックスタート
  4. 倉庫。このリポジトリには、ユーザーがすぐに使い始めることができるようにパッケージ化された基本設定が含まれています。
  5. 具体的な手順は次の手順に要約できます
    1. Electron
    2. -builder

    をインストールする

    クイックスタートリポジトリのクローンを作成しますgit clone https://github.com/electron/electron-quick-start .git

    vue プロジェクトをパッケージ化

    パッケージ化された vue ターゲット ファイルを Electron-packager 打包为应用程序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": {  }}
    🎜パッケージ化するコマンドを実行🎜
    npm run build
    🎜実行するだけでdistディレクトリに対象ファイルが生成されます🎜

    以上がElectron-packager はフロントエンドをアプリケーションにパッケージ化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。