[electron] 01 一分钟web应用秒变客户端软件(附原理及其他各种打包方案)
文章目录
- 导读
- 操作步骤
- 原理
- 下载预构建可执行文件
- 文件结构(Windows&Linux下)
- 修改main.js访问指定入口文件
- 打包指定URL
- 打包asar文件
- electron其他打包方案
- 参考资料
导读
大前端时代来临,前端变得无所不在,今天我们就将
web应用秒变客户端软件
。
操作步骤
从链接https://download.csdn.net/download/kinghzking/78131790下载
electron改-64位版本(web应用秒变客户端软件)
解压到任意目录
拷贝web应用打包后的目录到
resources\app\dist
目录
启动electron.exe
最终效果如下:
Ps: 需要使用32位的electron,可以通过此链接下载:https://download.csdn.net/download/kinghzking/78131834
原理
下载预构建可执行文件
根据官网部署教程#手动发布教程。
我们需要下载预构建可执行文件(prebuilt binaries)
,这里选择的是v8.3.4的版本:https://github.com/electron/electron/releases/tag/v8.3.4,该版本有如下几个有点:
- 二进制文件相对新版本较小
- 这是自我感觉比较稳定的版本。
文件结构(Windows&Linux下)
对于源文件,目录结构如下:
对于存档asar
文件,目录结构
其实通过github下载的预构建可执行文件
中,resources目录下只有一个叫做default_app.asar
的文件,
我们通过asar
解压文件asar extract default_app.asar default_app
,可以查看该目录结构如下:
可以看出来,electron其实就是讲asar文件当做文件夹访问了,内部是也是main.js
和package.json
等文件。
修改main.js访问指定入口文件
上一小节中,我们解压的default_app.asar
文件内容比较复杂,引用太多其他的内容了,为了让大家更好的理解,我们这里使用最简单的electron示例项目https://github.com/electron/electron-quick-start,将其中的main.js
和package.json
文件拷贝到resources\app
目录。
因为默认vue项目打包npm run dev
后就是dist,我们直接将index.html
替换为dist/index.html
,以后只要将vue等项目的打包后文件拷贝到dist目录就可以了。
打包指定URL
除了本地应用外,还可以指定加载URL,比如我们让electron访问自己的网站,我们只需要将mainWindow.loadFile('dist/index.html')
替换为mainWindow.loadURL('http://www.l0l.fun')
就可以了。
效果如下图(史上最烂个人主页):
打包asar文件
REM 全局安装asar
npm install -g asarREM 切换到resources目录
cd resourcesREM 打包asar,文件名固定为app.asar
asar pack app app.asar
最终在resources
目录中只保留app.asar
就可以了。
electron其他打包方案
electron-builder
(默认electron-vue项目,支持更多的平台,支持自动更新,打出的包更为轻量,setup安装程序)- electron-forge
- electron-packager
nativefier
(支持一键打包,修改应用图标,海量配置参数,支持docker。https://github.com/jiahaog/nativefier)
参考资料
- electron官网部署教程 https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution
- 使用electron将现有vue项目打包为exe https://www.51cto.com/article/627670.html
- qq群:夜猫逐梦技术交流裙/953949723
[electron] 01 一分钟web应用秒变客户端软件(附原理及其他各种打包方案)相关推荐
- iphone12android在线,安卓秒变iphone12桌面预约-安卓秒变iphone12软件免费版预约| - 99安卓游戏...
安卓秒变iphone12软件免费版是一款好玩的神器,让你的安卓手机一秒变苹果.各种主题壁纸都能同步苹果,一键美化,操作简单哦! 安卓秒变iphone12软件免费版介绍 这款软件非常的有趣,大家如果感兴 ...
- 只需一分钟,手机摄像头秒变电脑摄像头!这软件厉害了!
版权归作者所有,任何形式转载请联系作者. 作者:清霁丶(来自豆瓣) 来源:https://www.douban.com/note/780953808/ 前言 前几期介绍了手机话筒变成电脑麦克风,今天这 ...
- 史上最全桥梁主动防撞预警系统通航净高系统实施方案,花30分钟让您秒变专家
通航净高涉及到船只安全通行和桥梁安全.根据<内河交通安全标志GB13851>等标准和规范的规定,为保障船舶和桥梁等过河建筑物自身的安全与客户要求,无锡漫途科技自主研发了"桥梁防碰 ...
- 国庆出游神器:魔幻黑科技换天造物,让vlog秒变科幻大片!
摘要:国庆旅游景点人太多,拍出来的照片全是人人人.车车车,该怎么办?不妨试试这个黑科技,让你的出游vlog秒变科幻大片. 本文分享自华为云社区<国庆出游神器,魔幻黑科技换天造物,让vlog秒变科 ...
- 主动变被动9个例句_怒赞!这30个雅思口语地道表达和例句,让你秒变native speaker!...
你以为你的口语很地道?然而随便去腐国玩一趟,你就会惊讶地发现,英语都白学了!说的啥?根本听不懂啊! 今天,烤鸭君为大家整理了超级接地气的30个雅思口语地道表达和例句,让你秒变native speake ...
- 周杰伦林俊杰李宗盛快失业了!有了AI,未来人人都能秒变作曲家
译者 | thinkdeeper 编辑 | 鸽子 有没有想过,未来你也可以像周杰伦.林俊杰.李宗盛一样成为创作型的音乐人?你要的,只是感觉,其他的,人工智能的研究人员已经帮你做好了. 如果你以为这只是 ...
- 杜克大学提出 AI 算法,拯救渣画质马赛克秒变高清
来源:HyperAI超神经 本文约1900字,建议阅读7+分钟 高清无码不是梦. 场景描述:将"马赛克"像素级别的大头照转换成高清照片,是一种怎样的体验?杜克大学提出的 AI 算法 ...
- tab s6 linux on dex,S Pen + DeX模式 三星Galaxy Tab S6让你秒变办公达人
S Pen + DeX模式 三星Galaxy Tab S6让你秒变办公达人 2020年03月23日 16:21作者:黄页编辑:黄页 分享 在很多人眼里,平板电脑在生活中主要是照顾用户的娱乐需求,因为不 ...
- 如何升级浏览器_Chrome谷歌浏览器秒变科研神器,让你的效率提升10倍!
正所谓"工欲善其事,必先利其器",有了好用的工具,工作和科研效率就会"事半功倍".今天我们一起看看如何让Chrome谷歌浏览器秒变工作和科研神器.01 Chro ...
最新文章
- js将字符串作为函数名调用函数
- 帝国cms底部代码哪里改?要修改版权和统计代码
- 订单倒计时取消,nodejs 辅助实现倒计时任务
- 用Docker之后还需要OpenStack吗
- asp 表格渐变颜色_加班到半夜,同事却用WPS表格小技巧10分钟搞定工作!
- MySQL(八)子查询和分组查询
- 【渝粤教育】 国家开放大学2020年春季 1069中央银行理论与实务 参考试题
- eclipse中java环境配置
- 408中的计算机组成原理,2021考研计算机大纲408计算机组成原理部分原文解析
- 64位字长的高性能微型计算机,什么是字长字节和字长的区别
- mysql创建一张日期表_MySQL创建一张日期表
- Sklearn提供的常用数据集
- 如何找回mysql删除的表_mysql误删表如何恢复,恢复被删除表的步骤说明
- 采样频率和带宽的关系_示波器的采样率及存储深度
- 佳文分享:我个人比较受用的一些习惯
- 服务器上传excel文件并读取数据,asp.net上传Excel文件并读取数据的实现方法
- 修改Samba服务的监听端口
- 构造函数c语言引用,c – 定义的构造函数的“未定义引用”
- 老男孩之猛龙过江电影高清版迅雷下载
- DropWizard的AOP扩展点最佳实践