利用Electron将web页面打包成电脑桌面程序

1.从github上克隆项目至本地

打开终端，输入以下命令：

git clone https://github.com/electron/electron-quick-start

cd electron-quick-start

npm install

npm start

2.修改默认配置参数

可根据你的需求，对项目中的一些参数进行修改，如：设置应用显示窗口大小、隐藏菜单栏、隐藏边框、设置窗口是否拖动等等

详细参考官方文档

3.进行打包

（1）安装打包工具 electron-packager：

npm i electron-packager 

（2）配置打包参数，方法有两种，直接在命令行输入或者在package.json文件里面编辑一个新的指令。个人比较推荐第二种：
格式：electron-packager < location of project > < name of project > < platform > < architecture > < electron version > < optional options >

• location of project：项目所在路径
• name of project：打包的项目名字
• platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）
• architecture：决定了使用 x86 还是 x64 还是两个架构都用
• electron version：electron 的版本
• optional options：可选选项

例如我打包的是window x64版本：

"package": "electron-packager ./ 体育局LED屏 --platform=win32 --arch=x64 --out=./OutApp --electron-version=8.2.5 --icon=./favicon.ico"

（3）执行打包命令

npm run package

$PS：有的童鞋打包的时候会出现卡顿不动的情况下，一般情况可以选择添加淘宝镜像，使用cnpm命令打包会快很多$
（4）打包完成
（5）异常情况
自己踩过坑，就是打包的时候一直卡在一个页面，提示：WARNING: Make sure that .NET Framework 4.5 or later and Powershell 3 or later are installed, otherwise extracting the Electron zip file will hang.

这种情况先别慌，请按照我的方法进行操作：
1）检查你电脑上的 .NET Framework 版本
打开计算机窗口，然后我们地址栏中直接输入地址，C:\Windows\Microsoft.NET\Framework，然后回车，进行查看。

若不是4.5以上版本，请自己前往官网进行下载更新最新版本，这里就不做演示。
2）检查你电脑的PowerShell版本
在开始菜单查询框中输入“Powershell”；

点击第一个选中的选项进入，在命令行里输入

get-host

即可看到你当前的版本号

3）确保你的.NET Framework 版本在4.5以上和Powershell版本在3.0以上之后，再重复之前的打包命令，即可打包成功，提示如下：

然后再打开我们的项目根目录，可看到在OutApp目录下多了如下文件，那么恭喜你，打包成功！


附言：以上是我踩坑electron中的一部分，若有其他问题的童鞋可私信我，我看到之后会第一时间回复。