electron从安装到打包成exe---7个步骤快速完成简单封装

这边整合一个简单的electron,从安装到打包成exe文件,将我最后封装好的步骤分享给大家

前面配置环境那些就直接省略了。。。直接从安装electron开始了

1.安装electron – npm install --save-dev electron

2.找一个demo,省的自己去配置 (我研究时用的demo)
链接: https://pan.baidu.com/s/1h8p3ZBkGutOfHQU2Tm6ihQ
提取码: 5e6y

3.解压demo,在该目录下运行electron . 在这里插入图片描述如果出现这个界面,代表electron安装没问题,demo也没问题

4.整合自己代码到electron里 让自己的代码能以桌面形式打开,其实就是把main.js指向demo里的index.html改成指向你打包好的项目的index.html,对了 先把打包好的项目拷贝到demo里,丢进来就行像这样
在这里插入图片描述
5.丢进来后修改main.js文件,指向你项目中的index.html,像这样在这里插入图片描述

6.再次在demo的目录下运行electron . 项目如果打包没问题就基本没什么问题,运行成功后就会展示自己的界面了
在这里插入图片描述

7.现在开始打包成exe文件
首先,运行命令 —npm install 执行结束后 安装打包插件------npm i electron-packager@12.1.0

在这里插入图片描述安装结束就可以打包了-----npm run-script packager
在这里插入图片描述
如果是这样的 就说明打包成功了,然后就可以在demo下面看到了在这里插入图片描述在这里插入图片描述

最后:packager下载完成后 有可能运行打包命令会失败 这时候要看看package.json中生成electron-packager属性的版本号和下载是否一致(demo里面是我安装时的版本,可能会和你后来安装的对不上),另外就是scripts下的packager里的参数可以修改应用名称和下载的文件名 !希望这篇整合后的electron能让大家更快实现封装桌面应用的功能
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值