超简单:十分钟带你把你的web网页打包成pc客户端

超简单:十分钟带你把你的web网页打包成pc客户端

前言

这是我个人开源的leno-admin前后端分离项目的electron版,所以本文中的案例及代码都是用到的都是leno-admin的前端代码,如果你觉得不错,可以为作者开源项目点个✨star✨,就是对我最大的鼓励;

演示地址

文档地址

源码gitee地址

源码github地址

一、了解electron-egg

leno-admin-electron是基于electron-egg开发的,electron-egg上手简单,并且有着优秀的跨平台特性,一套代码可以打包成windowmaclinux等等,并且能够支持任何的前端技术,无论是vue还是react都可以支持,他还是完全开源和免费的。

个人使用感受来说确实是非常简单易上手,能够快速的帮你把你的web应用打包构建为客户端程序;

electron-egg

二、实操

你可以执行以下命令,到gitee上拉取leno-admin-egg的代码,来尝试下将web页面打包成客户端程序;

bash 复制代码
 git clone https://gitee.com/zhao-wenchao110/leno-admin-electron.git

下载electron-egg依赖,根目录中执行:

bash 复制代码
npm i

切换到frontend目录执行再执行上面的npm i命令行下载前端案例代码依赖

2-1、开发环境

启动开发环境

shell 复制代码
# 先启动 frontend 前端代码
npm run dev

# 然后cd .. 根目录
npm run dev

然后你的电脑中会出现以下两个窗口,一个是你的程序运行窗口,一个是谷歌浏览器的一样的调试窗口,当然其中的项目仅仅是前端代码,如果你要完整的体验他,你需要到leno-admin项目中拉取后端代码,将其运行到你的电脑中;

2-2、构建打包

electron-egg官方中描述支持winmaclinux等主流操作系统,我个人电脑是win系统,所以本人仅测试了win系统的软件打包,详细的其他打包信息可以查看electron-egg的官方文档;

arduino 复制代码
# 先将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的官方文档中查询

四、其他

你可以到giteegithub上拉取我的代码进行学习与测试,当然如果能够给我一个✨star✨的话,那便是对我最大的鼓励,谢谢~

leno-admin-electron源码gitee地址

leno-admin-electron源码github地址

相关推荐
程序员鱼皮15 分钟前
又一个新项目开源,让 AI 帮你盯全网热点!
javascript·ai·程序员·编程·ai编程
MXN_小南学前端22 分钟前
前端开发中 try...catch 到底怎么用?使用场景和最佳实践
javascript·vue.js
星空椰29 分钟前
JavaScript 基础进阶:分支、循环与数组实战总结
开发语言·javascript·ecmascript
小李子呢021141 分钟前
前端八股---闭包和作用域链
前端
IT_陈寒1 小时前
Redis的内存溢出坑把我整懵了,分享这个血泪教训
前端·人工智能·后端
m0_738120721 小时前
渗透测试基础ctfshow——Web应用安全与防护(五)
前端·网络·数据库·windows·python·sql·安全
Z_Wonderful1 小时前
基于 Vite 的 React+Vue 混部完整模板(含目录结构、依赖清单、启动脚本)
前端·vue.js·react.js
Rooting++2 小时前
腾讯无界微前端源码分析
前端
小嘿前端仔2 小时前
用AI读源码这件事:前端视角的实战方法论,附Vue3 reactivity源码解读示范
前端
其实防守也摸鱼2 小时前
XSS漏洞全景解析:从原理、实战利用到纵深防御
前端·网络·安全·xss·xss漏洞