为你提供一个 最简单的 Electron 项目模板，包含完整的代码、配置和打包说明。即使你是小白，也能快速上手。
1. 项目结构
/your-project├── main.js # Electron 主进程文件├── preload.js # 安全通信脚本（可选）├── index.html # 前端页面├── package.json # 项目配置└── build/ # 打包配置目录（后文会生成）2. 初始化项目
在空文件夹中打开终端，执行：
npm init -y
npm install --save-dev electron electron-builder3. 核心文件代码
(1) main.js - 主进程
const { app, BrowserWindow, Menu, } = require('electron')
const path = require('path')let mainWindowfunction createWindow() {// 创建浏览器窗口mainWindow = new BrowserWindow({width: 2500,height: 1000,icon: path.join(__dirname, 'images/favicon.png'),webPreferences: {preload: path.join(__dirname, 'preload.js') // 安全通信脚本}})// 隐藏菜单栏Menu.setApplicationMenu(null);// 加载本地文件（生产环境）mainWindow.loadFile('index.html')// mainWindow.webContents.openDevTools()}// Electron 初始化完成时触发
app.whenReady().then(createWindow)// 关闭所有窗口时退出应用（macOS 除外）
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})// macOS 点击 Dock 图标重新打开窗口
app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()
})(2) preload.js - 安全通信脚本
// 这里可以暴露安全的 API 给渲染进程
window.electronAPI = {doThing: () => require('electron').ipcRenderer.send('do-a-thing')
}(3) index.html - 前端页面
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我的 Electron 应用</title>
</head>
<body><h1>Hello Electron!</h1><button id="btn">点击测试</button><script>document.getElementById('btn').addEventListener('click', () => {// 调用预加载脚本暴露的方法window.electronAPI?.doThing()})</script>
</body>
</html>4. 配置 package.json
{"name": "my-electron-app","version": "1.0.0","main": "main.js","scripts": {"start": "electron .","pack": "electron-builder --dir","dist": "electron-builder"},"build": {"appId": "com.example.myapp","productName": "我的应用","directories": {"output": "dist" // 打包输出目录},"win": {"target": "nsis", // Windows 安装包"icon": "build/icon.ico"},"mac": {"target": "dmg","icon": "build/icon.png"},"linux": {"target": "AppImage"}},"devDependencies": {"electron": "^28.0.0","electron-builder": "^24.0.0"}
}5. 添加应用图标
在 build/ 目录下放置：
-
icon.ico（Windows） -
icon.png（macOS/Linux）
推荐尺寸：至少 256x256 像素
6. 运行与打包命令
测试打包（不生成安装包）
npm run pack
生成安装包
npm run dist
打包结果会输出到 dist/ 目录：
-
Windows:
.exe安装包 -
macOS:
.dmg镜像 -
Linux:
.AppImage
7. 注意事项
-
安全建议：
-
生产环境不要禁用
contextIsolation -
所有 Node.js API 调用通过
preload.js中转
-
-
调试技巧：
-
主进程调试：在 VSCode 中添加调试配置
-
渲染进程调试：右键页面选择 "Inspect Element"
-
-
跨平台问题：
-
Windows 打包需在 Windows 系统进行
-
macOS 打包需要证书签名
-
