快捷導(dǎo)航

Electron 使? electron-builder 打包應(yīng)用過程詳解

更新時(shí)間：2024年10月09日 09:34:56 作者：fishmemory7sec

Electron應(yīng)用開發(fā)中,electron-builder是一個(gè)常用的打包工具,提供了多種自定義配置,不過,使用npm安裝electron-builder時(shí)可能會遇到下載依賴慢或失敗的問題,本文給大家介紹Electron 使? electron-builder 打包應(yīng)用的相關(guān)操作,感興趣的朋友一起看看吧

electron有幾種打包方式，我使用的是electron-builder。雖然下載依賴的時(shí)候讓我暴躁，使用起來也很繁瑣，但是它能進(jìn)行很多自定義，打包完成后的體積也要小一些。

安裝electron-builder：

npm install electron-builder -D

使用 npm 下載 electron-builder 真的非常非常難受！總是失?。?/p>

electron-builder官方建議使用yarn下載，并且明確表示Yarn is strongly recommended instead of npm.

yarn add electron-builder --dev

在 package.json 中進(jìn)?相關(guān)配置：

{
  "name": "my-electron-app", // 應(yīng)?程序的名稱
  "version": "1.0.0", // 應(yīng)?程序的版本
  "main": "main.js", // 應(yīng)?程序的???件
  "scripts": {
  "start": "electron .", // 使? `electron .` 命令啟動(dòng)應(yīng)?程序
  "build": "electron-builder" // 使? `electron-builder` 打包應(yīng)?程序，?成安裝包
  },
  "build": {
  "appId": "my-electron-app", // 應(yīng)?程序的唯?標(biāo)識符
  // 打包windows平臺安裝包的具體配置
  "win": {
  "icon": "./favicon.ico", //應(yīng)?圖標(biāo)
  "target": [
  {
  "target": "nsis", // 指定使? NSIS 作為安裝程序格式
  "arch": ["x64"] // ?成 64 位安裝包
  }
  ]
  },
  "nsis": {
  "oneClick": false, // 設(shè)置為 `false` 使安裝程序顯示安裝向?qū)Ы?，?不是?鍵安裝
  "perMachine": true, // 允許每臺機(jī)器安裝?次，?不是每個(gè)?戶都安裝
  "allowToChangeInstallationDirectory": true // 允許?戶在安裝過程中選擇安裝?錄
  }
  },
  "devDependencies": {
  "electron": "^30.0.0", // 開發(fā)依賴中的 Electron 版本
  "electron-builder": "^24.13.3" // 開發(fā)依賴中的 `electron-builder` 版本
  },
  "author": "zhangSan", // 作者信息
  "license": "ISC", // 許可證信息
  "description": "一個(gè)測試用的electron項(xiàng)目" // 應(yīng)?程序的描述
}

配置完成后，執(zhí)行打包命令：

npm run build

問題及解決方案下載Electron v32.1.2 的壓縮包時(shí)出現(xiàn)了問題，導(dǎo)致后續(xù)的操作無法進(jìn)行：

Electron 默認(rèn)打包會從github上下載相關(guān)二進(jìn)制包，在國內(nèi)訪問github非常慢，下載相關(guān)資源失敗是很可能的事情。

直接通過瀏覽器訪問 https://github.com/electron/electron/releases/download/v32.1.2/electron-v32.1.2-win32-x64.zip，看是否能夠正常下載：

解決方案

翻一下墻，打開開關(guān)，解決問題
配置electron相關(guān)資源的鏡像源

修改npm配置文件（沒有就創(chuàng)建）：

可以在終端輸入npm config edit命令，打開.npmrc文件
可以按路徑C:\Users\PC找到.npmrc文件并打開
設(shè)置 electron 和 electron-builder-binaries 的鏡像地址：

electron_mirror=https://registry.npmmirror.com/-/binary/electron/
electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/
always-auth=false

electron_mirror：這個(gè)環(huán)境變量指定了 Electron 的下載鏡像地址。當(dāng)項(xiàng)目需要下載 Electron 時(shí)，會優(yōu)先從這個(gè)地址去獲取二進(jìn)制文件。
electron_builder_binaries_mirror：這個(gè)環(huán)境變量指定了 electron-builder-binaries 的下載鏡像地址。electron-builder 是一個(gè)用于構(gòu)建 Electron 應(yīng)用的工具，而 electron-builder-binaries 包含了一些預(yù)編譯的二進(jìn)制文件，用于不同的平臺和架構(gòu)。設(shè)置這個(gè)鏡像地址可以確保在構(gòu)建過程中能夠快速、穩(wěn)定地獲取這些二進(jìn)制文件。
always-auth=false：表示在訪問這些鏡像資源時(shí)不需要進(jìn)行身份驗(yàn)證。

.ico文件的尺寸至少是256 * 256

重新生成符合要求的favicon.ico

到此這篇關(guān)于Electron 使? electron-builder 打包應(yīng)用的文章就介紹到這了,更多相關(guān)Electron electron-builder 打包應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: