携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情

上一篇文章中，我们用electron做了一个小游戏，那么如何将其打包成windows程序呢，使用electron-builder和electron-packager都可以，实际上，如果你想打包成单个exe文件的话，更好的选择是electron-builder，只要写个配置就好了，然而我走了一个大大的弯路……

太长不看版

全局安装electron-builder：

npm i electron-builder -g

在package.json文件中写入以下配置：

{
  "build": {
    "appId": "com.vdproject.findxiaoxi",
    "copyright":"Lin Yuchen",
    "productName":"寻找小希",// 软件名
    "icon": "logo.ico",// 图标
    "win": {
      "target": [
        "portable"// 写这个参数就可以打包成单个exe文件了
      ]
    }
  }}

成果：

我走的弯路

如果找到这篇文章是来解决electron打包成单独exe问题的，可以划走了，上面方法就可以完美解决了，这之后是记录一下我先前找的弯路……

由于资料查询不慎，网络上很多文章都写着electron-builder只能打包成安装包，我一想这么个小小的程序打成安装包也太不合理了，于是直接抛弃了electron-builder而选择了electron-packager。

electron-packager打包主要用的参数为：

electron-packager . [程序名] --win --out [输出目录] --app-version=1.0.0  --icon=[图标地址] --verbose --overwrite --win32metadata.CompanyName=[公司名称]

打包完成后，实际上是一个包含着exe文件和其他一堆文件的文件夹：

而这个exe文件是无法独立运行的，我查了n多资料试了各种参数都无法让electron-packager打出单独的exe文件，于是想了个别的招：

自解压文件

自解压文件实质上是一个带解压程序的压缩包，打开exe后缀名的自解压文件后会自动将文件解压到某个地方，当然光解压是不够的了，要把它弄成跟独立的exe文件一样，还需要加一些配置： 首先是选择所有文件，进行压缩，进入配置页面，勾选自解压选项（我选用的是winrar，经过尝试7z的自解压不能配置，bandizip的自解压不能更改图标）：

之后呢，还需要配置自解压的位置，为了避免造成麻烦，就解压到临时文件夹好了，同时勾选静默模式不显示解压过程：

最后，设置解压完成后自动打开文件夹中的exe文件就好了：

对了，差点忘了去配置下图标，否则就会是难看的自解压默认图标：

压缩完成后，就出现exe文件了：

双击之后，它会静默的执行解压，解压完成后自动打开exe文件，就跟独立的exe文件一模一样了！