简介

文章更新与2023年2月1日。

electron官网：https://www.electronjs.org
electronforge官网：https://www.electronforge.io

环境要求：git、node@14版本以上、npm@8版本以上。具体的可以看一下官方的文档，也可以不管，后面有提示再根据提示更新和安装。

自使用electron以来，它的打包就一直是一个使我头疼的问题。electron有好几打包工具，以前官方没有推荐用谁。现在官方统一推荐forge来打包了，哪个打包工具有什么的优势也没有人说明白。总之官方推荐，并且存在即正义的准则，那么就不要问为什么了，用就完了。

安装

1.安装：这里我使用的是npm安装，当然你也可以用cnpm、yarn等等安装。安装一般没有什么问题，这里就不延伸了。
npm install --save-dev @electron-forge/cli

2.自动配置：这里forge会自动配置你的package.json的代码，所以推荐在执行前先拷贝一份，避免命令冲突被置换找不回来。
npx electron-forge import

这一步会出现一些问题，因为forge的打包和配置是需要 git 的环境支持，所以这里可能会报错Could not find git in environment，出现没有git的环境提示，就需要安装git（git的官网：https://gitforwindows.org/）。

git安装完成后，这时执行npx electron-forge import，还是会提示找不到git环境。那就到git bash的窗口去执行命令。记得切换到目标文件夹下执行。

打包

打包也需要到git bash的窗口去执行命令，记得切换到目标文件夹下执行。

打包的过程可能会提示你有些信息是必填的，这时候就到package.json中填写好必要项。我这里是提示我作者是必要项，所以我就到package中填写好。

再次打包就成功了。

到这里，我们基本已经将环境配置好，打包出程序了。现在就可以仔细配置其他一些自定义项了。

更多配置

配置vue项目

不管你用什么脚手架，vue的项目最终都会被打包。有的项目就是为桌面端开发的，也就是在开发的时候启动两个进程（一个vue项目进程，一个electron进程，electron加载本地的一个端口数据），这时候就需要我们先将vue打包，在打包electron。有nodejs基础的，可以根据自己项目的情况，开发一键打包命令，没有基础的就只能绕个弯分次打包（期望以后有兼容性好的打包插件出现吧）

所以我们第一步就是将vue的项目打包好，但vue的项目默认是部署到服务器需要路由的效果。所以我们就需要用electron构建一个路由类似托管vue项目的静态资源。

electron已经为我们想好了，electron有一个类protocol，我们可以使用它来构建。

来看一下目录结构在看一下代码。

多平台打包mac os

forge配置项