头图

我们一般使用electron-builderelectron项目进行打包,在package.json中配置打包的详细操作

pnpm install electron-builder -D

package.json中的详细字段解释:


"build": {  
  "appId": "your.id", // 应用的唯一ID  
  "productName": "YourProductName", // 安装后生成的文件夹和快捷方式的名称  
  "copyright": "Copyright © 2024", // 版权声明,通常包含版权年份和名称。
  // 该部分用于配置 macOS 操作系统上的构建设置。
  "mac": {
    "category": "public.app-category.utilities", // 应用在 macOS 中的类别,影响应用在 Mac App Store 中的位置。
    "icon": "./logo.ico" // 应用程序的图标,通常是 .icns 格式,这里用的是 .ico 格式,但在 macOS 中通常需要特定格式(.icns)。
  },
  // 此部分配置 Windows 操作系统上的构建信息。
  "win": { 
    "icon": "./logo.ico", // 应用图标
    "target": [
      {
        "target": "nsis", // 指定使用 NSIS 作为安装程序格式
        "arch":  ["x64"] // 生成64位安装包
      }
    ]
  },
  // 此部分专门用于配置 NSIS 安装程序的选项。
  "nsis": {  
    "oneClick": false, // 是否一键安装,如果为 false,则显示安装向导  
    "allowElevation": true, // 是否允许请求提升(以管理员身份运行)  
    "allowToChangeInstallationDirectory": true, // 是否允许用户更改安装目录  
    "createDesktopShortcut": true, // 是否在桌面上创建快捷方式  
    "createStartMenuShortcut": true, // 是否在开始菜单中创建快捷方式  
    "shortcutName": "YourAppName", // 快捷方式的名称  
    "uninstallDisplayName": "Your App", // 卸载时显示的名称  
    "license": "path/to/license.txt", // 许可证文件的路径  
    "installerIcon": "path/to/installer-icon.ico", // 安装程序图标的路径  
    "uninstallerIcon": "path/to/uninstaller-icon.ico", // 卸载程序图标的路径  
    "installerHeaderIcon": "path/to/header-icon.ico", // 安装向导头部的图标路径  
    "installerSidebarIcon": "path/to/sidebar-icon.bmp", // 安装向导侧边栏的图标路径(必须是 BMP 格式)  
    "runAfterFinish": true, // 安装完成后是否运行应用  
    "perMachine": true, // 是否为所有用户安装(而非仅当前用户)  
    "script": "path/to/custom-nsis-script.nsh", // 自定义 NSIS 脚本的路径  
    "compression": "lzma", // 压缩方式,可选值包括 'none', 'zip', 'lzma' 等  
    "artifactName": "${productName}-${version}-Setup.${ext}", // 自定义输出文件的名称  
  },  
  // 指定要包含在构建输出中的文件。这些文件将会被打包到最终的安装程序中。
  "files": [
    "dist/**/*", // 包括 dist 文件夹及其子文件夹中的所有文件。
    "electron/**/*" //  包括 electron 文件夹及其子文件夹中的所有文件。
  ],
  // 定义构建过程中使用的特定目录。
  "directories": {
    "buildResources": "assets", // 指定用于构建的资源文件的位置(如图标等),这里设为 assets。
    "output": "dist_electron" // 指定构建输出的目录,这里设为 dist_electron,表示构建完成的应用将输出到这个文件夹中。
  }
}

运行打包命令

pnpm run build

目录中会生成dist文件夹,内部就打包的产物


兔子先森
380 声望16 粉丝

致力于新技术的推广与优秀技术的普及。