超简单：十分钟带你把你的web网页打包成pc客户端
超简单：十分钟带你把你的web网页打包成pc客户端
前言
这是我个人开源的leno-admin前后端分离项目的electron版，所以本文中的案例及代码都是用到的都是leno-admin的前端代码，如果你觉得不错，可以为作者开源项目点个✨star✨，就是对我最大的鼓励；
一、了解electron-egg
leno-admin-electron是基于electron-egg开发的，electron-egg上手简单，并且有着优秀的跨平台特性，一套代码可以打包成window、mac、linux等等，并且能够支持任何的前端技术，无论是vue还是react都可以支持，他还是完全开源和免费的。
个人使用感受来说确实是非常简单易上手，能够快速的帮你把你的web应用打包构建为客户端程序；
二、实操
你可以执行以下命令，到gitee上拉取leno-admin-egg的代码，来尝试下将web页面打包成客户端程序；
git clone https://gitee.com/zhao-wenchao110/leno-admin-electron.git
下载electron-egg依赖，根目录中执行：
npm i
切换到frontend目录执行再执行上面的npm i命令行下载前端案例代码依赖
2-1、开发环境
启动开发环境
# 先启动 frontend 前端代码
npm run dev
# 然后cd .. 根目录
npm run dev
然后你的电脑中会出现以下两个窗口，一个是你的程序运行窗口，一个是谷歌浏览器的一样的调试窗口，当然其中的项目仅仅是前端代码，如果你要完整的体验他，你需要到leno-admin项目中拉取后端代码，将其运行到你的电脑中；
2-2、构建打包
electron-egg官方中描述支持win、mac、linux等主流操作系统，我个人电脑是win系统，所以本人仅测试了win系统的软件打包，详细的其他打包信息可以查看electron-egg的官方文档；
# 先将frontend前端项目打包成静态文件
npm run build
# 再到根目录中同步前端静态文件
npm run rd
# 构建打包
npm run build-w
注意： 第一次build构建打包的时候，回到github中下载electron官方的构建工具，可能会导致失败，我个人按照官方的替换为国内镜像，但是还是失败，如果第一次一直卡着不动，推荐使用魔法~🎃
打包完后，会在根目录的out目录下生成以下文件，双击应用程序安装即可~
三、配置项
如果你想更换为自己的前端项目，你可能需要注意一些事项：
3-1、应用模式配置
你需要保证你的前端运行端口和/electron/config/config.default.js内的 config.developmentMode中配置的mode一致：
3-2、窗口伸缩控制
你想要限制你的窗口伸缩最小的范围，你需要到/electron/config/config.default.js内的 config.windowsOption进行修改
3-3、生成环境中调试
如果你想在打包后的生产环境中也进行调试功能的开启，你需要到你需要到/electron/config/config.prod.js进行配置，然后npm run start进行生产环境预览，在其中进行调试功能测试；
如果的需要知道更多，你可能需要到electron-egg的官方文档中查询
四、其他
你可以到gitee或github上拉取我的代码进行学习与测试，当然如果能够给我一个✨star✨的话，那便是对我最大的鼓励，谢谢~