上次我给大家介绍了如何通过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，也可以独自开发桌面应用程序。
以上就是本次分享的全部内容，这篇教程如果大家感兴趣的话可以点个赞。
谢谢大家的支持！！！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。