electron+vite+vue3.0+frorge最新打包流程
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
这里写自定义目录标题
简介
文章更新与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的环境提示就需要安装gitgit的官网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我们可以使用它来构建。
来看一下目录结构在看一下代码。