上次我给大家介绍了如何通过Electron将react项目构建成桌面应用，并且成功启动项目。这次我再教大家如何将前端页面打包成.exe可执行文件。接下来我将一步一步地介绍如何操作。

开发环境

Nodejs

首先我们要打包页面，就是将react的静态页面构建成.exe文件。然后才能将.exe封装成软件安装包。

electron-packager：electron的打包插件，将项目打包成exe文件；

安装方式：命令行安装 npm install electron-packager -g

NSIS软件：封装工具，可以将.exe文件封装成安装包

安装方式：NSIS汉化包下载地址https://httpsimg.dsx2020.com/NSIS_v251_Build_20160601+-+NSISFANS.zip

打包exe文件

通过命令行安装electron-packager，以下是全局安装electron-packager的命令行

npm install electron-packager -g

安装成功后，就可以将页面打包成exe文件。在项目目录中打开cmd。运行以下命令行打包：

electron-packager ./build library-management-system --platform=win32 --arch=x64 --icon=public/favicon.ico --out=./exes --app-version=1.0.0 --overwrite --ignore=node_modules

打包成功以后我们会发现项目目录里面多了一个exes文件夹。里面就是我们打包出来的文件了，里面包含了.exe文件，可以直接双击运行页面。

如果你能走到这一步，那么说明你离成功不远了，接下来就是将exe封装成安装包。

构建安装包

打开nsis软件，文件>新建脚本：向导。

下一步。

填写软件基本信息；应用程序名称、应用程序版本、应用程序出版人可以随意填写，应用程序网站如果没有则留空即可。然后就进行下一步。

选择安装程序的图标，定义程序安装包的文件名，安装程序语言选择简体中文。然后下一步。

默认，然后下一步。

填写程序的安装目录，默认即可。没有授权文件就空着，又可以选择，然后下一步。

删除这两个默认的文件。

然后添加打包生产的exe文件，点击确定。

添加文件目录

选择打包生成的文件目录（是文件夹），然后勾选包含子目录。点击确定。

下一步

下一步。

下一步

下一步

保存脚本，点击完成，将脚本保存在本地。

保存脚本后，在nsis中打开脚本。然后在菜单栏中选择编译脚本。

然后就是等待，编译时间大概是2到3分钟左右，编译成功以后就会出现一下提示。

安装软件

然后我们会发现在exes文件夹中多了一个react_Setup .exe可执行文件，这个文件就是我们通过NSIS工具编译出来的安装包文件。我们双击执行它，就可以进入正常的安装步骤了。

我们直接下一步就可以安装软件了。

安装完成后，我们看到电脑桌面上多了一个名叫react项目安装的图标，我们直接双击打开软件。

最后我们成功打开了软件。

到这里，我们实现了将前端页面打包成软件安装包的需求了。Electron让前端开发人员实现了从网页到桌面应用的跨越式提升。作为前端开发人员，你不用会写C++，只要你会写JavaScript，也可以独自开发桌面应用程序。

以上就是本次分享的全部内容，这篇教程如果大家感兴趣的话可以点个赞。

谢谢大家的支持！！！