用过electron-vue的同学,都会知道:最终打包选择会有两个,一个是:electron-packager,另外一个是electron-builder。这两个工具对比起来看的话,苏南大叔更加倾向于electron-packager。但是,大家更多人选择的是electron-builder。那么,选择或者不选择的理由是什么呢?

使用electron-builder,如何设置设置用户可选择安装目录? - electron-change-directory
使用electron-builder,如何设置设置用户可选择安装目录?(图7-1)

苏南大叔对于electron-builder默认生成的安装包exe,似乎是非常不满意的。因为会默认安装完毕,根本不给人反应的时间,也不会给大家选择安装目录的机会。但是事实是:这种情况还是有的改善的。本文中主要描述的内容是:使用electron-builder,如何设置用户可选择安装目录?

本文测试环境:win10/electron-vue/electron-builder@20.38.5

一语天机

这里说个一语道破天机的话,下面的等式是基本成立的:

if(windows){
  electron-packager + innosetup/nsis = electron-builder
}

electron-builder中,默认是使用nsis这个脚本来生成最终的安装包的。表面上来看,生成的安装包是非常令人不爽的。因为,太过于简陋了。特别是不给自定义安装目录的机会这事儿,颇受诟病。那么大家可以想想看,electron-builder是基于nsisnsis不能自定义安装目录么?并不是。所以,问题的解决方案就是:自定义electron-buildernsis设置项目。

设置项目

由于electron-builder的默认设置是保存在package.json中的build节点里面的,那么一般来说,大家就是需要修改这个节点的设置了。(也许您采用的是双配置文件的方案,那么请自行查找合适的配置位置)。

build字段里面增加个nsis的子节点。配置项目有两个:

  • oneClick设置为false
  • allowToChangeInstallationDirectory设置为true

使用electron-builder,如何设置设置用户可选择安装目录? - nsis-options-2
使用electron-builder,如何设置设置用户可选择安装目录?(图7-2)

package.json:

newsn.net:这里是【评论】可见内容

可能出现的错误提示

上述两个属性是有相关性的。如果单独设置allowToChangeInstallationDirectory的话,可能会报错。报错如下:

allowToChangeInstallationDirectory makes sense only for assisted installer (please set oneClick to false)

使用electron-builder,如何设置设置用户可选择安装目录? - allow-change-directory
使用electron-builder,如何设置设置用户可选择安装目录?(图7-3)

最终效果

从截图中,大家可以看到,禁用了oneClick之后,不光可以选择自定义安装目录了。其实很有很多其他的界面设置项目被打开了,那么如何设置其他的项目呢?想想看吧。

使用electron-builder,如何设置设置用户可选择安装目录? - nsis_install_01
使用electron-builder,如何设置设置用户可选择安装目录?(图7-4)

使用electron-builder,如何设置设置用户可选择安装目录? - nsis_install_02
使用electron-builder,如何设置设置用户可选择安装目录?(图7-5)

使用electron-builder,如何设置设置用户可选择安装目录? - nsis_install_03
使用electron-builder,如何设置设置用户可选择安装目录?(图7-6)

相关链接:

延伸阅读

相信,如果您设置了nsis节点中的oneClickfalse的话,一个新的大门就向你打开了。更多的nsis配置项目,可以点击这个位置查看:

使用electron-builder,如何设置设置用户可选择安装目录? - nsis-option
使用electron-builder,如何设置设置用户可选择安装目录?(图7-7)

关于electron-builder构建windows的安装包,大家关心的大多数问题,都是可以从上面这个网址中找到答案的。仔细阅读项目吧。推荐您同时对比阅读下面这篇文章。您会有更深刻的理解。

如果您喜欢查看源码,来思考问题的话,可以查看这个文件:

electron-builder/packages/app-builder-lib/src/targets/nsis/nsisOptions.ts

总结

问题得到了解决,授人以鱼不如授人以渔,这个道理大家都知道。所以,大家遇到问题,也要多多思考。想想如何才能更好的解决问题,才是正途。对吧?下面的链接,是苏南大叔写过的有关nsis的文章内容,请点击查看:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron    nsis

本站的忠实读者小伙伴,正在阅读下面这些文章: