为你提供一个 最简单的 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 mainWindow
function 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 打包需要证书签名