先决条件：需安装 Node.js (https://nodejs.org)

步骤 1：创建项目目录并初始化

mkdir my-html-app  #创建工作目录 my-html-app
cd my-html-app  #进入工作目录
npm init -y  #初始化新的或现有的 npm 包的命令

步骤 2：安装 Electron

npm install electron --save-dev

步骤 3：创建主进程文件 main.js

// main.js 内容：
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  // 加载本地 HTML 文件（将 index.html 放在项目根目录）
  mainWindow.loadFile('index.html')
}

app.whenReady().then(createWindow)

步骤 4：修改 package.json

{
  "name": "my-html-app",  //项目名称
  "version": "1.0.0",  //版本号
  "main": "main.js",  //入口文件
  "scripts": {
    "start": "electron ."
  }
}

步骤 5：测试运行

npm start

步骤 6：打包为 EXE（使用 electron-packager）

npm install electron-packager -g  #安装electron-packger
electron-packager . my-app --platform=win32 --arch=x64  #打包
electron-packager . 随机派 --platform=win32 --arch=x64 --icon=./icons/tubiao.ico

备注：打包慢

1. 对于 CMD 命令提示符：

set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
electron-packager . MyApp --platform=win32 --arch=x64 --icon=./build/icons/win.ico

2. 对于 PowerShell：

$env:ELECTRON_MIRROR = "https://npmmirror.com/mirrors/electron/"
electron-packager . MyApp --platform=win32 --arch=x64 --icon=./build/icons/win.ico

以下备份

// main.js 内容：
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')

let mainWindow
let aboutWindow // 声明窗口引用
// 框架
function createAboutWindow() {
  aboutWindow = new BrowserWindow({
    width: 800,
    height: 700,
        autoHideMenuBar: true,     // 自动隐藏菜单栏（用户仍可通过 Alt 键唤出）
    title: '关于我们',
    parent: mainWindow, // 设为子窗口
    modal: true, // 模态窗口
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    }
  })
// 加载关于页面
aboutWindow.loadFile(path.join(__dirname, 'about.html'))
// 窗口关闭时清理引用
  aboutWindow.on('closed', () => {
    aboutWindow = null
  })
}
function createWindow() {
  mainWindow = new BrowserWindow({
          width: 1600,
          height: 900,
          // autoHideMenuBar: true,     // 自动隐藏菜单栏（用户仍可通过 Alt 键唤出）
          webPreferences: {
            nodeIntegration: true
          }
  })
  
  mainWindow.loadFile('index.html')
  
  // 菜单配置
  const template = [
    {
      label: '操作',
      submenu: [
        {
          label: '退出',
          role: 'quit'
        }
      ]
    },
        {
          label: '关于',
          submenu: [
            {
              label: '关于我们',
              click: () => {
                if (!aboutWindow) {
                  createAboutWindow()
                } else {
                  aboutWindow.focus()
                }
              }
            }
          ]
        }
  ]

  Menu.setApplicationMenu(Menu.buildFromTemplate(template))
}

app.whenReady().then(createWindow)