為你提供一個?最簡單的 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 打包需要證書簽名
-
