【Electron】electron-builder打包基础配置介绍
站长
· 阅读数 22
一、前言
本篇主要介绍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配置对应路径引入就好了。
本篇完结！ 撒花！ 感谢观看！ 希望能帮助到你！