本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

一、前言

本篇主要介绍electron-builder打包的基础配置选项，本文项目基础框架为vue+electron-builder+electron，其中包含打包名称、应用名称、应用icon等配置。electron-builder官网

二、具体介绍

这里打包配置写在了vue.config.js中，内容如下

这里我们一个一个的讲一下每个常用配置的作用

1.productName应用的名称

这个就是你应用安装完之后的名称，如图

2.appId应用id

这个是你应用的唯一id，，确认后不要改动了！不然在更新时候，会被认做为两个应用。这个是在apple那里你申请证书的时候，用生成的那个id就可以，类似这种’com.example.app’。

3.publish更新配置

这个主要是用来配置应用的更新地址的，如下

publish: [ // 更新服务器地址
      {
        provider: 'generic',
        url: 'electron应用的更新地址'
      }
],

4.directories目录

这个主要是用来配置打包之后，包的输出文件夹， 默认地址是dist_electron，配置如下

directories: {
  output: '可自定义文件夹名称'
},

5.asar加密

是否使用Electron的存档格式将应用程序的源代码打包到存档中。这里我们使用webpack的打包就好了，我没有开启这个。

6.dmgmac安装包的配置项

这个主要是为了配置dmg格式安装包的，具体内容可以点击查看。 这里我主要是用来配置macOS系统的安装界面，如下图，里面的拖拽应用到文件夹是图片上的哦。

其中标题、应用图标（取决于你设置的应用图标）、应用名称（取决于你设置的应用名称）、背景图以及位置大小都是可以配置，配置如下

dmg: {
    background: '背景图地址',
    contents: [
        { // 这个是右边图标及内容
          x: 410,
          y: 190,
          type: 'link',
          path: '/Applications'
        },
        { // 这个是你左边的图标
          x: 130,
          y: 190,
          type: 'file'
        }
    ],
    window: { // 这里是整个窗口的大小
        height: 380,
        width: 540
    }
},

7.macmacOS系统相关打包配置

这里面的选项适用于任何macOS目标，具体内容可以点击查看。例如在mac系统上你应用的图标、打好的mac安装包的名称、mac系统下输出包的格式等，具体配置如下

mac: {
    // 应用程序图标
    icon: '自定义，建议使用png',
    // 应用程序包名 
    artifactName: '${productName}-${platform}-${arch}-${version}.${ext}',
    target: [ // 要打的包的格式类型设置
        'dmg',
        'zip' // 这里注意更新的时候，mac只认zip格式的包
    ], 
},

8.winwindows系统相关打包配置

这里面的选项适用于任何windows目标，具体内容可以点击查看。例如在windows系统上你应用的图标、打好的win安装包的名称、win系统下输出包的格式等，具体配置如下

win: {
    icon: `256*256的ico格式或png格式文件`,
    artifactName: '${productName}-${platform}-${arch}-${version}.${ext}',
    target: [
        {
          // 打包成一个独立的 exe 安装程序
          target: 'nsis',
          // 这个意思是打出来32 bit + 64 bit的包，但是要注意：这样打包出来的安装包体积比较大，所以建议直接打32的安装包。
          arch: [
          // 'x64',
            'ia32'
          ]
        }
    ],
    // 打出来的包，自动获取管理员权限，不建议打开
    // requestedExecutionLevel: 'highestAvailable',
    // ====windows签名公证相关====start--如果没做windows签名，不要开启
    // verifyUpdateCodeSignature: false,
    // signingHashAlgorithms: [
    // 'sha256'
    // ],
    // signDlls: true,
    // rfc3161TimeStampServer: 'http://timestamp.comodoca.com',
    // certificateFile: '******.pfx',
    // certificatePassword: '******',
    // certificateSubjectName: ''
    // ====windows签名公证相关====start
},

9.nsiswindow安装程序配置

这里是定义windows系统的安装程序相关的配置，具体内容可以点击查看。配置内容如下

nsis: {
      // NSIS的路径包括自定义安装程序的脚本。默认为build/installer.nsh
      include: 'build/installer.nsh',
      // 是否一键安装，建议为 false，可以让用户点击下一步、下一步、下一步的形式安装程序，如果为true，当用户双击构建好的程序，自动安装程序并打开，即：一键安装（one-click installer）
      oneClick: false,
      // 是否开启安装时权限限制（此电脑或当前用户）
      perMachine: true,
      // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
      allowElevation: false,
      // 允许修改安装目录，建议为 true，是否允许用户改变安装目录，默认是不允许
      allowToChangeInstallationDirectory: true,
      // 卸载时删除用户数据
      deleteAppDataOnUninstall: true,
      // 安装图标
      // installerIcon: 'build/installerIcon_120.ico',
      // 卸载图标
      // uninstallerIcon: 'build/uninstallerIcon_120.ico',
      // 安装时头部图标
      // installerHeaderIcon: 'build/installerHeaderIcon_120.ico',
      // 创建桌面图标
      createDesktopShortcut: true,
      // 创建开始菜单图标
      createStartMenuShortcut: true
}

最后这是全部的配置代码

// vue.config.js

module.exports = {
    pluginOptions: {
        electronBuilder: {
          builderOptions: {
            productName: '这里填写应用名称',
            appId: 'com.example.app', 
            publish: [ // 更新服务器地址
              {
                provider: 'generic',
                url: 'electron应用的更新地址'
              }
            ],
            directories: { // 打包之后，包的输出文件夹, 默认地址是dist_electron
              output: 'outputFile'
            },
            // asar打包
            asar: false,
            dmg: {
              background: '背景图地址',
              contents: [
                {
                  x: 410,
                  y: 190,
                  type: 'link',
                  path: '/Applications'
                },
                {
                  x: 130,
                  y: 190,
                  type: 'file'
                }
              ],
              window: {
                height: 380,
                width: 540
              },
            },
            mac: {
                // 应用程序图标
                icon: '自定义，建议使用png',
                // 应用程序包名 
                artifactName: '${productName}-${platform}-${arch}-${version}.${ext}',
                target: [ // 要打的包的格式类型设置
                    'dmg',
                    'zip' // 这里注意更新的时候，mac只认zip格式的包
                ], 
            },
            win: {
                icon: `256*256的ico格式或png格式文件`,
                artifactName: '${productName}-${platform}-${arch}-${version}.${ext}',
                target: [
                    {
                      // 打包成一个独立的 exe 安装程序
                      target: 'nsis',
                      // 这个意思是打出来32 bit + 64 bit的包，但是要注意：这样打包出来的安装包体积比较大，所以建议直接打32的安装包。
                      arch: [
                      // 'x64',
                        'ia32'
                      ]
                    }
                ],
                // 打出来的包，自动获取管理员权限，不建议打开
                // requestedExecutionLevel: 'highestAvailable',
            },
            nsis: {
              // NSIS的路径包括自定义安装程序的脚本。默认为build/installer.nsh
              include: 'build/installer.nsh',
              // 是否一键安装，建议为 false，可以让用户点击下一步、下一步、下一步的形式安装程序，如果为true，当用户双击构建好的程序，自动安装程序并打开，即：一键安装（one-click installer）
              oneClick: false,
              // 是否开启安装时权限限制（此电脑或当前用户）
              perMachine: true,
              // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
              allowElevation: false,
              // 允许修改安装目录，建议为 true，是否允许用户改变安装目录，默认是不允许
              allowToChangeInstallationDirectory: true,
              // 卸载时删除用户数据
              deleteAppDataOnUninstall: true,
              // 安装图标
              // installerIcon: 'build/installerIcon_120.ico',
              // 卸载图标
              // uninstallerIcon: 'build/uninstallerIcon_120.ico',
              // 安装时头部图标
              // installerHeaderIcon: 'build/installerHeaderIcon_120.ico',
              // 创建桌面图标
              createDesktopShortcut: true,
              // 创建开始菜单图标
              createStartMenuShortcut: true
            }
          }
        }
    }
}

以上就是关于electron-builder的一些基础配置，大家可以直接复制，修改下文件地址、名称可直接使用。关于electron-builder中的配置还有很多，在做mac签证和公证的时候或者引入一些node文件时候，也需要在这里面进行配置，后续会逐步的给大家完善讲解。

三、后记

这里再给大家分享一段关于nsis的自定义配置，可以实现指定路径安装的。

// installer.nsh
!macro preInit
    SetRegView 64
    ReadRegStr $0 HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\{GUID}" "UninstallString"
    ${If} $0 == ''
        WriteRegStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "C:\Program Files (x86)\hello"
    ${Endif}
    SetRegView 32
    ReadRegStr $0 HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\{GUID}" "UninstallString"
    ${If} $0 == ''
        WriteRegStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "C:\Program Files (x86)\hello"
    ${Endif}
!macroend

直接在nsis.include配置对应路径引入就好了。

本篇完结！ 撒花！ 感谢观看！ 希望能帮助到你！