electron打包前端的最简方式,没有之一!

1,149 阅读1分钟

electron是打包vue,react等前端项目的利器,然而electron环境配置复杂,包下载难,还容易出现npm包版本冲突问题,之前用electron-builder死活没弄成功,想说爱他真是不容易!
踩坑之后,总结出一套electron打包的最简姿势。
利用electron出的最新的打包工具Electron Forge。只需四步,完成任意前端项目打包。

准备工作,没有安装yarn的,全局安装yarn(下载速度快,安包体验好)

npm install -g yarn 

1、下载脚手架文件

yarn create electron-app my-app

2、将前端项目打包的dist文件拷贝到项目根目录

image.png

3、修改打包入口

image.png

4、打包

yarn make

然后在out文件夹就可以查看到打包结果啦,香不香~~
image.png

如果还想深入了解forge,看官网吧(www.electronforge.io/) 不过这文档写的让人看着云里雾里,有不小提升空间。。。要不是有点基础,按文档也很难把已有vue或react项目打包成功
done!