electron新手上路--(1),打包为exe桌面端

84 阅读1分钟

准备:准备一个dist包(普通项目打包后的包),下载安装electron

1.为了方便,我们可以拉取开源项目electron-quick-start,项目开源地址为(github.com/electron/el…)

2.下载完项目后,首先我们安装依赖,

重要

下载安装依赖的时候,一定要重新指定下载安装源,

npm config set electron_mirror "npmmirror.com/mirrors/ele…"

3.然后执行,npm install ,强烈推荐使用yarn,npm 常常会报一些网络错误, 安装electron packager,npm install electron-packager

安装elctron-builder

yarn add electron-builder

4.完成后,基本算是完成了,然后就是打开项目目录配置一些常用的属性。

image.png

1.首先是packager,作用是直接打包为对应的格式,后面是具体的配置项,执行的打包后的名称,平台。

2.main.js作为electron的主要交互,做相应的事件等。

image.png

mainWindow是创建一个桌面端的对象,里面的width,height属性分别配置桌面端的窗口宽度, icon是桌面的图标, mainWindow.loadFile是加载的入口文件,因为这个是直接指向的dist包了就,

5.配置完没问题后采用yarn run packager打桌面端的包,

image.png

打完后会多一个综合看板-win32-的包,启动里面的.exe文件就可以打包成功了。

好了,打一个简单的安装包,到此就结束了,有问题欢迎留言,本人也是刚刚接触,后面会更新如何自定义窗口,打不同的安装包的等等的文章。