Electron 打包发布

主流方案两种：Electron Forge（官方推荐，开箱即用）和 electron-builder（配置灵活，产物更丰富）。本文以 Forge 为主，builder 作对照。

Electron Forge

安装引入

npm install --save-dev @electron-forge/cli
npx electron-forge import   # 自动写入 scripts 和 makers 配置

package.json 配置

{
	"main": "main.js",
	"scripts": {
		"start": "electron-forge start",
		"package": "electron-forge package",
		"make": "electron-forge make"
	},
	"config": {
		"forge": {
			"packagerConfig": {
				"asar": true,
				"icon": "./build/logo",
				"ignore": [".vscode", "src"]
			},
			"makers": [
				{
					"name": "@electron-forge/maker-squirrel",
					"config": { "name": "electron_tools" }
				},
				{
					"name": "@electron-forge/maker-zip",
					"platforms": ["darwin"]
				},
				{
					"name": "@electron-forge/maker-deb",
					"config": { "options": { "maintainer": "Sunshine", "homepage": "https://example.com" } }
				},
				{
					"name": "@electron-forge/maker-rpm",
					"config": {}
				}
			]
		}
	}
}

makers 产物对照

maker	平台	产物
maker-squirrel	Windows	.exe 安装包（自动更新）
maker-zip	全平台	免安装压缩包
maker-deb	Linux	.deb（Debian/Ubuntu）
maker-rpm	Linux	.rpm（CentOS/Fedora）
maker-dmg（需另装）	macOS	.dmg

命令

npm run make                  # 打包当前平台安装包
npx electron-forge make --platform darwin   # 指定平台
npx electron-forge package    # 只打包可执行目录，不出安装包

electron-builder（对照）

npm install --save-dev electron-builder

{
	"scripts": {
		"build": "electron-builder",
		"build:win": "electron-builder --win",
		"build:mac": "electron-builder --mac"
	},
	"build": {
		"appId": "com.sunshine.electron-tools",
		"productName": "ElectronTools",
		"directories": { "output": "release" },
		"files": ["main.js", "preload.js", "dist/**/*"],
		"win": {
			"target": ["nsis"],
			"icon": "build/logo.ico"
		},
		"nsis": {
			"oneClick": false,
			"allowToChangeInstallationDirectory": true
		},
		"mac": {
			"target": ["dmg", "zip"],
			"category": "public.app-category.developer-tools"
		}
	}
}

集成 Vue/React 项目的通用做法

1. 前端项目正常 npm run build，产物在 dist/
2. main.js 中开发环境 loadURL("http://localhost:5173")，生产环境 loadFile("dist/index.html")

const loadWin = win => {
	if (process.env.NODE_ENV === "development") {
		win.loadURL("http://localhost:5173");
		win.webContents.openDevTools();
	} else {
		win.loadFile(path.join(__dirname, "dist/index.html"));
	}
};

3. 打包时把 dist 一并塞进 asar（Forge 的 packagerConfig / builder 的 files）

asar 是什么

Electron 把所有源码文件打包成一个 app.asar 归档（本质是拼接格式），好处：

1. 避免海量小文件拖慢 IO 和触发杀毒软件扫描
2. 一定程度上增加源码被直接查看的门槛（但不是加密，可被 asar extract 解包）

体积与签名提示

1. Electron 基础包约 150MB+，可用 electron-builder 的 two-packagejson 或 asar unpack 精简 ；极致优化可换 Tauri
2. Windows 分发需代码签名证书，否则 SmartScreen 会拦截；mac 需要 Developer ID 签名 + 公证（notarize）
3. 自动更新：Forge 用 update.electronjs.org（开源项目免费）或自建 general 服务；builder 用 electron-updater 对接 github/s3