Vite でビルドされた Vue.js プロジェクトを Windows および macOS プラットフォーム用の実行可能ファイルにパッケージ化するには、パッケージ化に Electron-Builder を使用できます。electron-builder は、アプリケーションを実行可能ファイルとインストーラーに簡単にパッケージ化できる Electron ベースのビルド ツールで、Windows、macOS、および Linux プラットフォームをサポートします。
1. まずインストールしelectron-builder て electron 依存します
npm install electron-builder electron --save-dev2. package.json 次のスクリプトをファイルに追加します。
"scripts": {
"build": "vite build && electron-builder",
"build:win": "vite build && electron-builder --win",
"build:mac": "vite build && electron-builder --mac"
}上記のコードでは、vite build コマンドを使用して Vue.js アプリケーションをビルドし、electron-builder コマンドを使用してアプリケーションを実行可能ファイルにパッケージ化します。ビルド スクリプトはすべてのプラットフォームをサポートするアプリケーションをパッケージ化し、build:win スクリプトは Windows プラットフォームをサポートするアプリケーションをパッケージ化し、build:mac スクリプトは macOS プラットフォームをサポートするアプリケーションをパッケージ化します。
3. プロジェクトのルート ディレクトリにelectron-builder.json ファイルを作成して、パッケージ化オプションを構成します。
{
"productName": "my-app-electron",
"appId": "com.electron.myapp",
"directories": {
"output": "dist"
},
"files": [
"dist/**/*",
"package.json"
],
"extraMetadata": {
"main": "dist/main/index.js"
},
"mac": {
"target": "dmg",
"icon": "build/icon.icns"
},
"win": {
"target": "nsis",
"icon": "build/icon.ico"
}
}
上記のコードでは、productName はアプリケーションの名前を表し、appId はアプリケーションの一意の識別子を表し、directorys.output はパッケージ化出力ディレクトリを表します。files 属性は、dist ディレクトリ内のすべてのファイルと package.json ファイルを含む、パッケージ化する必要があるファイルを指定します。extraMetadata 属性はエントリ ファイルのパスを指定します。ここでは dist/main/index.js です。mac プロパティと win プロパティはそれぞれ、アプリケーションのアイコンやターゲット ファイル形式などのパッケージ化オプションを指定します。
最後に、次のコマンドを実行してパッケージ化します。
npm run build:win // Windows プラットフォーム用にアプリケーションをパッケージ化します。
npm run build:mac // macOS プラットフォーム用にアプリケーションをパッケージ化します
。 パッケージ化が完了すると、実行可能ファイルがdist ディレクトリ。
上記は、Vite でビルドされた Vue.js プロジェクトを Windows および macOS プラットフォーム用の実行可能ファイルにパッケージ化するためのサンプル コードです。Vue.js プロジェクトで特別な依存関係または関数を使用する場合、追加の構成と処理が必要になる場合があることに注意してください。