简介：这份资源面向希望把本地HTML网页封装成Windows桌面程序的开发者，尤其适合刚接触Electron、需要快速产出可交付exe的初中级前端或全栈人员。内容围绕Electron框架展开，覆盖HTML/CSS/JS资源打包、BrowserWindow全屏显示、隐藏任务栏、监听Esc键退出，以及通过electron-packager或electron-builder自定义exe图标与文件名等关键环节，并涉及版本管理、错误处理与跨平台测试思路。压缩包共约2000个文件，以js、ts、map、json、md、license等源码与依赖文件为主，另有pak、dll、exe等运行时资源，整体约95.61MB，目录结构完整，便于直接运行与二次修改。目前已有1161人学习下载，可作为从网页到桌面应用落地的参考工程，帮助读者理解主进程与渲染进程通信、打包参数配置及常见排错路径。
1. 从网页到桌面程序：为什么我选 Electron 做 HTML 打包
手里有一个写好的 HTML 页面，可能是数据看板、可能是触屏查询机界面、也可能是内部培训课件，现在需要把它变成一个双击就能打开的 exe，还要全屏、盖住任务栏、按 Esc 退出、图标和文件名都得换成自己的。这种需求在展厅大屏、工厂工位机、学校机房这类场景里特别常见——浏览器一开地址栏就露出来，用户随手就能关掉或者跳走，体验完全不可控。
Electron 就是干这个的：它把 Chromium 和 Node.js 打包进一个可执行文件，你的 HTML 跑在里面就像一个独立桌面程序。相比直接让用户开浏览器访问，Electron 方案能控制窗口尺寸、隐藏菜单栏、拦截键盘事件、自定义图标，还能在需要的时候调用本地文件系统。这篇就按「能干什么 → 怎么跑起来 → 怎么改」的顺序，把整个打包流程拆一遍，包括全屏遮任务栏、Esc 退出、图标和文件名替换这些具体操作。
2. 环境搭建与项目骨架：从零到能跑的第一个窗口
2.1 安装 Node.js 与初始化项目
Electron 本身就是一个 npm 包，所以第一步是把 Node.js 装好。去 Node.js 官网下载 LTS 版本，安装时勾选「Add to PATH」，装完在命令行里验证：
node -v npm -v两条命令都能输出版本号就说明环境没问题。接下来建一个空文件夹作为项目根目录，比如叫html-to-exe，进去之后初始化：
mkdir html-to-exe cd html-to-exe npm init -ynpm init -y会生成一个默认的package.json，里面记录了项目名、版本、入口文件等信息。这个文件后面要改，因为 Electron 的入口不是默认的index.js，而是我们指定的主进程文件。
2.2 安装 Electron 并理解它的依赖结构
安装 Electron 用一条命令：
npm install electron --save-dev这里用--save-dev是因为 Electron 只是开发期和打包期的工具，最终产物是打包好的 exe，不需要用户再装 Electron。安装过程会下载一个几百 MB 的 Chromium 二进制包，国内网络环境下可能会慢，常见做法是配置 npm 镜像源：
npm config set registry https://registry.npmmirror.com装完之后node_modules里会出现electron目录，里面包含可执行文件。package.json的devDependencies里会多出一行"electron": "^版本号"。
2.3 项目目录结构与主进程入口
一个最小可用的 Electron 项目结构是这样的：
html-to-exe/ ├── package.json ├── main.js # 主进程入口 ├── preload.js # 预加载脚本（可选） └── src/ └── index.html # 你的网页main.js是主进程，负责创建窗口、控制窗口行为；src/index.html就是你要展示的网页。package.json里要把main字段指向main.js：
{ "name": "html-to-exe", "version": "1.0.0", "main": "main.js", "scripts": { "start": "electron ." } }改完之后运行npm start，如果一切正常，会弹出一个默认的 Electron 窗口。这一步先确认环境通了，再往下做全屏和退出逻辑。
3. 核心功能实现：全屏、遮任务栏、Esc 退出与图标替换
3.1 创建全屏窗口并遮住任务栏
Electron 创建窗口用BrowserWindow，全屏和遮任务栏的关键在构造参数。下面是一个完整的主进程代码：
const { app, BrowserWindow, globalShortcut } = require('electron'); const path = require('path'); let mainWindow = null; function createWindow() { mainWindow = new BrowserWindow({ width: 1920, height: 1080, fullscreen: true, // 全屏 frame: false, // 去掉标题栏和边框 kiosk: true, // kiosk 模式，强制全屏并遮任务栏 alwaysOnTop: true, // 置顶，防止被其他窗口盖住 skipTaskbar: true, // 不在任务栏显示 icon: path.join(__dirname, 'build/icon.ico'), // 窗口图标 webPreferences: { preload: path.join(__dirname, 'preload.js'), contextIsolation: true, nodeIntegration: false } }); mainWindow.loadFile(path.join(__dirname, 'src/index.html')); // 按 Esc 退出 mainWindow.webContents.on('before-input-event', (event, input) => { if (input.key === 'Escape' && input.type === 'keyDown') { app.quit(); } }); } app.whenReady().then(() => { createWindow(); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow(); }); }); app.on('window-all-closed', () => { app.quit(); });逐段说明：
fullscreen: true让窗口占满屏幕，但某些系统下任务栏仍可能弹出。kiosk: true是更彻底的全屏模式，它会强制窗口覆盖整个屏幕并阻止用户退出，任务栏被完全遮住。这是展厅、工位机场景最常用的配置。frame: false去掉系统自带的标题栏和关闭按钮，防止用户点 X 关掉。alwaysOnTop: true保证窗口不会被其他程序盖住，适合需要长期展示的场景。skipTaskbar: true让程序不在任务栏显示图标，进一步减少用户误操作的可能。icon指定窗口左上角图标，Windows 下用.ico格式，macOS 用.icns，Linux 用.png。
before-input-event是拦截键盘输入的关键。这里监听Escape键的keyDown事件，触发app.quit()退出程序。注意要判断input.type === 'keyDown'，否则按键抬起时也会触发一次。
提示：如果
kiosk: true导致调试时无法退出，可以在开发阶段先注释掉这行，等打包前再打开。
3.2 修改 exe 图标和文件名
开发阶段窗口图标已经通过icon参数设置了，但最终 exe 文件的图标和文件名需要在打包时指定。打包用electron-builder，先安装：
npm install electron-builder --save-dev然后在package.json里加build配置：
{ "build": { "appId": "com.example.htmltoexe", "productName": "MyApp", "directories": { "output": "dist" }, "win": { "target": "nsis", "icon": "build/icon.ico" }, "nsis": { "oneClick": false, "allowToChangeInstallationDirectory": true, "createDesktopShortcut": true, "shortcutName": "MyApp" } } }参数说明：
productName决定最终 exe 的文件名，比如设为MyApp，产物就是MyApp Setup 1.0.0.exe和安装后的MyApp.exe。win.icon指定 exe 图标，必须是 256x256 的.ico文件，否则打包会报错。nsis.oneClick设为false会生成带安装向导的安装包，用户可以选择安装路径；设为true则是一键安装。shortcutName是桌面快捷方式的名字。
图标文件放在项目根目录的build文件夹下，命名为icon.ico。如果没有现成的 ico，可以用在线工具把 png 转成 ico，注意尺寸要包含 256x256。
3.3 打包命令与产物验证
在package.json的scripts里加一条打包命令：
{ "scripts": { "start": "electron .", "build": "electron-builder --win" } }运行：
npm run build打包完成后，dist目录下会出现安装包和免安装的win-unpacked文件夹。双击win-unpacked里的 exe 验证：是否全屏、任务栏是否被遮住、按 Esc 是否退出、图标和文件名是否正确。如果图标没变，检查 ico 文件是否包含 256x256 尺寸；如果任务栏没遮住，确认kiosk: true是否生效。
4. 避坑与常见问题排查
4.1 打包后白屏或页面加载失败
现象：开发时npm start正常，打包后打开 exe 是白屏。
原因：loadFile的路径用了相对路径，打包后文件结构变了，找不到 HTML。
解决：统一用path.join(__dirname, 'src/index.html')这种基于__dirname的绝对路径。如果 HTML 里引用了 CSS、JS、图片，也要用相对路径并且确保这些文件被包含在打包产物里。electron-builder默认会打包项目根目录下除node_modules开发依赖外的所有文件，但最好在build.files里显式声明：
{ "build": { "files": [ "main.js", "preload.js", "src/**/*" ] } }4.2 Esc 退出不生效
现象：按 Esc 没反应，程序不退出。
原因：焦点不在webContents上，或者事件被页面里的 JavaScript 拦截了。
解决：before-input-event是挂在webContents上的，只要窗口有焦点就能触发。如果页面里有输入框或者某些库监听了键盘事件并preventDefault，可能会影响。可以在页面里也加一个监听作为兜底：
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { window.close(); } });但window.close()在 Electron 里默认只能关闭由脚本打开的窗口，所以更稳妥的做法是通过 preload 暴露一个退出方法，或者直接用主进程的before-input-event。
4.3 任务栏遮不住
现象：fullscreen: true了，但鼠标移到屏幕底部任务栏还是弹出来。
原因：Windows 的任务栏在某些情况下会覆盖全屏窗口，尤其是窗口没有置顶时。
解决：加上kiosk: true和alwaysOnTop: true。kiosk模式是专门为这种场景设计的，它会阻止任务栏弹出。如果还不行，检查是否有多显示器，窗口可能创建在了副屏上。
4.4 图标不生效
现象：打包后 exe 图标还是默认的 Electron 图标。
原因：ico 文件尺寸不对，或者路径配置错误。
解决：确认build/icon.ico存在且包含 256x256 尺寸。electron-builder对 ico 文件要求比较严格，建议用专业工具生成。另外win.icon的路径是相对于项目根目录的，不要写成绝对路径。
4.5 安装包体积过大
现象：打包出来的安装包几百 MB。
原因：Electron 本身包含 Chromium 和 Node.js，体积天然就大。
解决：这是 Electron 的固有特性，无法根本解决。可以通过electron-builder的asar压缩、排除不必要的文件来减小一些体积，但预期管理要做好——Electron 应用的安装包通常在 50MB 到 150MB 之间。
5. 二次开发与改造思路：从能跑到好用
5.1 把网页内容做成可配置
如果这个 exe 要给多个场景用，每次改 HTML 都要重新打包就很麻烦。常见做法是把 HTML 内容外置，程序启动时读取同目录下的config.json或者直接加载外部 HTML 文件：
const fs = require('fs'); const configPath = path.join(path.dirname(app.getPath('exe')), 'config.json'); let targetUrl = 'src/index.html'; if (fs.existsSync(configPath)) { const config = JSON.parse(fs.readFileSync(configPath, 'utf-8')); targetUrl = config.url || targetUrl; } mainWindow.loadFile(targetUrl);这样运维人员只需要改config.json里的地址，不用重新打包。如果加载的是远程 URL，把loadFile换成loadURL即可。
5.2 增加退出密码或组合键
Esc 直接退出在生产环境可能太随意，可以改成组合键，比如Ctrl+Shift+Q：
mainWindow.webContents.on('before-input-event', (event, input) => { if (input.control && input.shift && input.key.toLowerCase() === 'q') { app.quit(); } });或者弹一个密码框，验证通过才退出。这样既能防止误触，又保留了维护通道。
5.3 禁用右键菜单和开发者工具
展厅场景不希望用户右键或者按 F12 打开开发者工具，可以在主进程里禁用：
mainWindow.webContents.on('context-menu', (e) => { e.preventDefault(); }); globalShortcut.register('CommandOrControl+Shift+I', () => { return false; });context-menu事件拦截右键菜单，globalShortcut拦截开发者工具快捷键。注意globalShortcut要在app.whenReady()之后注册。
5.4 自动更新与版本管理
如果程序部署在多台机器上，手动更新很痛苦。electron-builder配合electron-updater可以实现自动更新。基本思路是在package.json里配置publish地址，主进程里监听更新事件：
const { autoUpdater } = require('electron-updater'); app.whenReady().then(() => { autoUpdater.checkForUpdatesAndNotify(); });自动更新需要有一个文件服务器或者对象存储来放安装包和latest.yml文件。对于内部使用的场景，也可以简单点——程序启动时请求一个版本接口，发现新版本就提示用户下载。
5.5 性能与内存优化
Electron 应用的内存占用一直是槽点。如果页面本身不复杂，可以在webPreferences里关掉一些不必要的功能：
webPreferences: { preload: path.join(__dirname, 'preload.js'), contextIsolation: true, nodeIntegration: false, enableRemoteModule: false, spellcheck: false, backgroundThrottling: false }backgroundThrottling: false在需要后台持续运行的场景下有用，但会增加 CPU 占用。另外，如果页面只是静态展示，可以考虑用BrowserView或者WebContentsView替代BrowserWindow，减少一层窗口管理的开销。
从那以后我每次打包前都会强制走一遍检查清单：ico 尺寸对不对、kiosk开没开、Esc 逻辑测没测、config.json路径对不对。这几步花不了五分钟，但能省掉现场部署时的一堆麻烦。希望帮到你。
本文还有配套的精品资源，点击获取
