最常用且最可靠的方法是用 electron 打包：先构建最小项目（index.html + main.js + package.json），安装 electron 和 electron-builder，配置 build 字段与 dist 脚本，运行 npm run dist 即可在 dist 目录生成独立 .exe 文件。
用 Electron 打包 index.html 最常用也最可靠
直接把 index.html 变成双击就能运行的 .exe，本质是把它塞进一个带浏览器内核的桌面应用容器里。Electron 是目前最成熟的选择，它把 Chromium + Node.js 封装好，你只需提供 HTML、CSS、JS 就能生成原生应用。
关键不是“打包 HTML”，而是“用 Electron 启动这个 HTML”。所以第一步得有最小 Electron 项目结构：
- 新建文件夹，
npm init -y - 安装 Electron：
npm install --save-dev electron - 根目录放
index.html，再新建main.js（主进程入口） -
main.js至少包含创建窗口并加载index.html的逻辑，比如：const { app, BrowserWindow } = require('electron')<br>function createWindow() {<br> new BrowserWindow({ width: 800, height: 600 }).loadFile('index.html')<br>}<br>app.whenReady().then(createWindow) - 在
package.json里写上："main": "main.js"和"scripts": { "start": "electron ." }
打包成 exe 必须用 electron-builder 或 electron-packager
Electron 本身不提供打包能力，electron . 只是运行，要生成 .exe 得靠第三方工具。现在推荐 electron-builder，它自动处理图标、签名、NSIS 安装器等细节，比 electron-packager 更省心。
实操步骤：
- 安装：
npm install --save-dev electron-builder - 加构建配置：在
package.json里加"build": { "win": { "target": "nsis" } }（生成带安装向导的.exe）或"target": "portable"（单个免安装.exe） - 加脚本：
"scripts": { "dist": "electron-builder" } - 运行：
npm run dist—— 输出在dist/目录下
注意：Windows 下打包必须在 Windows 系统中进行，跨平台打包（比如 macOS 上打 Windows 包）不可靠，会缺 DLL 或签名失败。
静态资源路径错乱？别用相对路径硬写
开发时 index.html 用 ./style.css 没问题，但打包后资源被放进 asar 归档或不同层级，./ 会指向执行路径（通常是用户桌面），而不是应用内部路径。
解决方法只有两个：
- 用 Electron 提供的
__dirname或app.getAppPath()构造绝对路径，例如：path.join(__dirname, 'assets', 'icon.png') - 或者更简单：所有静态资源通过
file://协议由主进程注入路径，比如在main.js中用win.loadFile('index.html')，然后在 HTML 里用./是安全的 —— 但前提是所有资源和index.html在同一级或子目录，且没启用 asar（或明确配置"asar": false）
常见症状：net::ERR_FILE_NOT_FOUND、图片不显示、CSS 不生效，基本都是路径崩了。
想轻量一点？WebView2 + C++/C# 是替代方案，但门槛高
如果只是展示固定页面、不需要 Node.js 集成、也不需要多窗口/系统托盘等功能，Electron 确实偏重（最小包约 150MB）。这时可考虑 Microsoft 的 WebView2：它复用系统 Edge 内核，打包后只有几 MB。
但代价明显：
- 必须用 C#（WinForms/WPF）或 C++ 写宿主程序，加载
index.html需调用CoreWebView2API - 无法直接读取本地文件（
file://受 CORS 限制），得启动本地 HTTP 服务（如用HttpListener）或把 HTML 嵌入资源（Embedded Resource） - 调试困难，没有 DevTools 开箱即用，需手动启用
除非你已有 C# 团队、对体积极度敏感、且页面纯前端无复杂交互，否则没必要切过去。
Electron 的坑主要在路径和打包环境，其他都算可控。真正容易被忽略的是：打包前一定要在干净 Windows 虚拟机或另一台机器上测试生成的 .exe —— 本地开发环境里能跑，不代表它真能脱离 node_modules 独立运行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
