ectron-builder –save-dev
“`
### 2. 配置打包選項
在項目根目錄下創建一個 builder.js 文件,并添加以下代碼:
“`javascript
const builder = require(‘electron-builder’);
builder.build({
targets: builder.Platform.MAC.createTarget(),
config: {
‘appId’: ‘com.example.vue-ui’,
‘productName’: ‘Vue-UI’,
‘artifactName’: ‘vue-ui-${version}.${ext}’,
‘directories’: {
‘output’: ‘dist’
},
‘dmg’: {
‘background’: ‘path/to/background.png’,
‘icon’: ‘path/to/icon.icns’,
文件夾打包exe‘contents’: [
{
‘x’: 410,
‘y’: 150,
‘type’: ‘link’,
‘path’: ‘/Applications’
},
{
‘x’: 130,
‘y’: 150,
‘type’: ‘file’
}
]
}
}
});
“`
這里我們使用了 builder 的 build 方法來進行打包。其中,targets 選項指定我們要打包的平臺,這里我們選擇了 Mac OS X。config 選項是我們的打包配置,它包含了一些基本信息,如應用程序 ID、產品名稱、輸出目錄等。dmg 選項是我們的 dmg 配置,它包含了一些 dmg 相關的信息,如背景圖片、圖標、安裝位置等。
### 3. 執行打包命令
在終端中執行以下命令進行打包:
“`
node builder.js
“`
打包完成后,我們可以在 dist 目錄下找到生成的 dmg 文件。
## 總結
通過以上步驟,我們可以將 Vue-UI 打包成一個 dmg 文件,方便用戶進行安裝和使用。打包工具 electron-builder 提供了豐富的配置選項,可以滿足不同的需求。如果您需要將 Vue-UI 打包成其他平臺的安裝文件,也可以參考 electron-builder 的文檔進行配置。