参考文档：Electron官网 | electron-builder
前提：请先安装到node环境。

介绍

Electron 是一个使用 Web 技术（HTML、CSS、JavaScript）构建跨平台桌面应用的框架。本文将带你从零开始，一步步创建一个简单的 Electron 应用，并完成打包。

一、环境准备与项目初始化

1、创建目录

# 创建目录
mkdir my-electron-app

# 切换到对应目录
cd my-electron-app

# 初始化项目（生成 package.json）
npm init

2、配置 npm 镜像

由于 Electron 体积较大，建议配置国内镜像加速下载。在项目根目录创建 .npmrc 文件：

# 在项目根目录创建 .npmrc 文件 .npmrc 文件是 npm 的配置文件
# .npmrc 文件内容
electron_mirror=https://npmmirror.com/mirrors/electron/
strict-ssl=false
registry=https://registry.npmmirror.com/

3、安装 Electron

npm install electron --save-dev

二、核心文件编写

1、package.json（项目配置）

关键字段说明：

  • main: 指定应用入口文件为 main.js
  • scripts.start: 定义启动命令 npm run start
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello Electron!",
  "main": "main.js",
  "scripts": {
	"start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "J",
  "license": "MIT",
  "devDependencies": {
    "electron": "^41.1.0"
  }
}

2、main.js（主进程）

const { app, BrowserWindow } = require('electron/main')
// 创建窗口
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
  // 窗口对应的文件地址，也可以是web页面地址
  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
  // macOS: 点击 dock 图标时重新创建窗口
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})
// 所有窗口关闭时退出应用（Windows/Linux）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

3、index.html（渲染进程）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Hello from Electron renderer!</title>
  </head>
  <body>
    <h1>Hello from Electron renderer!</h1>
    <p>👋</p>
    <p id="info"></p>
  </body>
</html>

三、运行效果

执行启动命令：

npm run start

在这里插入图片描述

运行后，你将看到一个 800x600 的桌面窗口，显示 “Hello from Electron renderer!” 的欢迎页面。
在这里插入图片描述

四、应用打包

1、安装打包工具

npm install -d electron-builder

2、更新 package.json 配置

为了提示构建速度，在测试阶段，可以参考以下配置。
1、构建命令添加–dir参数，表示不需要打包安装包程序；
2、关闭执行程序签名校验功能。

添加打包脚本和构建配置：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello Electron!",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dist": "electron-builder --dir",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "J",
  "license": "MIT",
  "devDependencies": {
    "electron": "^41.1.0",
	"electron-builder": "^26.8.1"
  },
  "build": {
    "win": {
      "signAndEditExecutable": false,
      "verifyUpdateCodeSignature": false,
      "forceCodeSigning": false
    }
  }
}

优化说明：

  • –dir 参数：仅生成解压目录，不打包成安装包（加快测试构建速度）
  • signAndEditExecutable: false：跳过可执行文件签名
  • verifyUpdateCodeSignature: false：关闭签名校验
  • forceCodeSigning: false：禁用强制代码签名

3、执行构建

npm run dist

构建完成后，可在 dist/win-unpacked 目录找到可执行文件。
在这里插入图片描述

五、性能与体积分析

1、目录结构

目录：dist\win-unpacked

dist/
└── win-unpacked/
    ├── my-electron-app.exe    # 主程序
    ├── resources/
    │   └── app/
    │       ├── main.js
    │       ├── index.html
    │       └── package.json
    └── ...（依赖库文件）

在这里插入图片描述

2、内存占用情况

运行状态 内存占用
后台运行 约 50-80 MB
窗口激活 约 100-150 MB
开启 DevTools 约 200-300 MB

后台运行下内存占用
在这里插入图片描述
窗口激活的情况下内存占用
在这里插入图片描述

打开页面调试工具的情况下
在这里插入图片描述

3、文件体积

  • 解压后目录：约 200-250 MB（包含 Chromium 内核和 Node.js 运行时）
  • 生成安装包：约 50-80 MB（经压缩）
    在这里插入图片描述
# electron # javascript # 前端
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

Notepad++编写html文件使用D3绘图：数据可视化

avatar 2048 AI社区
cover

LangChain的使用和Deepseek的私有化部署

avatar 2048 AI社区

集成AI 的 Redis 客户端 Rudist发布新版了

天下苦 Electron 架构的数据库 GUI 久矣。动辄大几百 MB 的内存占用、拖泥带水的冷启动速度、在加载海量 Key 时令人崩溃的卡顿……作为开发者，我们只是想要一个能的趁手工具。与此同时，这也是一个 AI 降临的时代，诸如官方等各大工具纷纷推出了内建的 AI 助手（如 Copilot）。但为了享受 AI 红利，这往往意味着。这对于极度看重数据隐私的企业团队或是有着合规红线的极客开发者来说

avatar 2048 AI社区