1、Electron框架
官网地址：简介 | Electron
2、创建项目并安装依赖
mkdir my-electron-app cd my-electron-app npm init -y npm install electron electron-builder --save-dev3. 项目结构
my-electron-app/ ├── package.json ├── main.js └── index.html4. 写主进程main.js
const { app, BrowserWindow } = require('electron'); const path = require('path'); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: false, contextIsolation: true } }); win.loadFile('index.html'); } app.whenReady().then(createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit(); });5、写页面index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>My Electron App</title> </head> <body> <h1>Hello Electron</h1> <p>这是一个最简单的 Electron 桌面应用。</p> </body> </html>6、配置package.json
把package.json改成这样：
{ "name": "my-electron-app", "version": "1.0.0", "main": "main.js", "scripts": { "start": "electron .", "dist": "electron-builder" }, "build": { "appId": "com.example.myapp", "productName": "MyApp", "directories": { "output": "dist" }, "files": [ "main.js", "index.html" ], "win": { "target": "nsis" }, "mac": { "target": "dmg" }, "linux": { "target": "AppImage" } }, "devDependencies": { "electron": "^33.0.0", "electron-builder": "^24.6.0" } }这里build字段就是electron-builder的打包配置。
7. 本地运行
npm start如果能看到一个窗口，里面显示Hello Electron，说明应用已经可以跑起来了。
8. 生成安装包
在 Windows 上执行：
npm run dist打包完成后，会在dist/目录里生成类似：
dist/ ├── win-unpacked/ └── MyApp Setup 1.0.0.exe这个.exe就是安装包。
8.1 几个小提示
- 如果你在Windows上跑
electron-builder，默认会生成 Windows 安装包。 - 如果你在macOS上跑，会生成
.dmg。 - 想只打 Windows 包，可以用：
npx electron-builder --win - 图标可以先不加；如果需要自定义图标，再准备
icon.ico/icon.icns，并在build.win.icon、build.mac.icon里配置。
8.2 配置国内镜像源
electron-builder打包时要从 GitHub 下载 Electron 二进制包和 NSIS 安装包工具，国内直连经常超时。可以通过配置国内镜像提高速度，在项目根目录my-electron-app/下新建.npmrc文件，内容：
electron_mirror=https://npmmirror.com/mirrors/electron/ electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
