electron 是将 index.html 打包为桌面应用最直接成熟的方案，需通过 main.js 加载页面并借助 electron-builder 等工具生成 .exe；注意路径须用相对引用，禁用 file:// 协议，且打包后体积大、启动慢属固有特性。
用 Electron 打包 index.html 为桌面应用最直接
Electron 是目前将 HTML 页面转为桌面应用最成熟、文档最全的方案，适合快速验证或轻量发布。它本质是把 Chromium + Node.js 打包进一个可执行文件，index.html 就是它的主页面。
常见错误是试图用纯打包工具（如 pkg 或 upx）直接压缩 HTML 文件——这行不通，HTML 本身不能独立运行，必须依赖浏览器环境。
- 初始化项目：在项目根目录运行
npm init -y，然后安装electron作为开发依赖：npm install --save-dev electron - 创建
main.js入口文件，内容至少包含窗口创建逻辑（必须加载index.html） - 修改
package.json的main字段为"main": "main.js"，并添加启动脚本："start": "electron ." - 确保
index.html路径正确——Electron 默认从main.js所在目录解析相对路径，建议用path.join(__dirname, 'index.html')加载
打包成 .exe 需用 electron-builder 或 electron-packager
electron 本身只提供运行时，不负责打包。直接双击 main.js 只能靠命令行启动；生成独立 .exe 必须借助打包工具。推荐 electron-builder，它支持一键生成 Windows 安装包（.exe）和便携版（.exe 单文件）。
- 安装：
npm install --save-dev electron-builder - 在
package.json中添加构建配置，例如："build": {"appId": "com.example.app", "win": {"target": "nsis"}}（nsis生成安装器，"target": "portable"生成单文件.exe） - 运行
npx electron-builder build --win portable，输出在dist/目录下 - 注意：Windows 打包必须在 Windows 系统上进行（或使用 GitHub Actions 交叉构建），macOS/Linux 上无法生成有效
.exe
静态资源路径容易出错：不要用绝对路径或 file://
打包后，index.html 不再通过 file:// 协议打开，而是由 Electron 加载为 app:// 或内部协议。所有相对路径（CSS、JS、图片）仍可工作，但硬编码的 file:///C:/... 或绝对 URL 会 404。
- 避免在 HTML 中写
<script src="C:%5Cmy%5Cscript.js"></script>或<img src="file:///D:/assets/logo.png"> - 图片、字体等资源建议放在
./assets/下，用相对路径引用：<img src="./assets/logo.png"> - 如果需动态读取本地文件（如用户选择的文件），必须用
dialog.showOpenDialog()+fs.readFile()，不能直接fetch('file:///...')—— Electron 默认禁用该协议以保安全
体积大、启动慢是 Electron 的固有代价
一个空 Electron 应用打包后通常 100MB+，首次启动要加载整个 Chromium 实例。这不是配置问题，而是架构决定的。如果你只是想双击运行一个简单页面，且不依赖 Node.js 功能，Electron 可能“杀鸡用牛刀”。
- 替代思路：用
WebView2+ C#/.NET（Windows 原生轻量）、或Tauri（Rust 后端 + WebView 前端，打包后仅几 MB） - Tauri 示例：它默认加载
src-tauri/src/main.rs并指向dist/index.html，打包命令tauri build即可生成小体积.exe - 但 Tauri 对前端代码有约束（例如默认禁用
eval、需显式声明 API 权限），迁移成本略高于 Electron
真正卡住人的往往不是“怎么打包”，而是路径加载失败、Node.js 模块未正确暴露、或者误以为打包后还能像开发时一样随意访问本地磁盘。动手前先确认你是否真的需要 Node.js 集成——如果只是展示静态页面，甚至一个带图标快捷方式的 Edge 启动器都比 Electron 更轻。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
