electron 打包教程

electron简介

1. electron 本质上是一个浏览器
2. 在electron 运行程序，可以使用vue / react 打包的静态资源直接运行，也可以使用网址运行web项目
3. 官网文档提供了示例 github地址：electron-quick-start

使用electron-quick-start

使用electron 快速根据vue 打包 应用

1. 修改vue.config.js 中的根目录 为./
2. 将vue项目打包 生成dist目录
3. 将vue打包的dist 目录复制到 electron-quick-start 项目根目录下
4. 修改main.js中的加载html的路径，实现将vue 项目打包成应用记录

mainWindow.loadFile('./dist/index.html')

安装electron-forge脚手架，使用forge 打包

npm install --save-dev @electron-forge/cli
//打包命令
npm run make

- 如上命令会生成out目录，在out目录中，有两个文件夹，一个是程序源码，一个是mask(分发程序)
- 运行程序源码下的exe 文件，程序运行

安装electron-builder 使用其打包(实现自动更新)

npm i electron-builder
// 打包命令
electron-builder --win --x64  # 打包 Windows
electron-builder --mac --universal # 打包 Mac Intel
electron-builder --mac --arm64 # 打包 Mac M1

- 在使用electron-builder 打包时候，需要编写electron-builder.json，配置相关项，否则界面将会白屏
- 根本原因是因为与forge 文件打包后保存路径不同。