使用 Electron 将网页应用转换为 EXE 文件

  1. 安装 Node.js：

  2. 创建项目文件夹：

    1
    2
    3
    bashmkdir MyApp  
    cd MyApp  
    npm init -y

  3. 安装 Electron：

    1
    npm install electron --save-dev

  4. 创建主文件：
    在项目目录下创建 main.js：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    const { app, BrowserWindow, Menu } = require('electron');  

    function createWindow() {  
        const win = new BrowserWindow({  
            width: 1024,  
            height: 768,  
            //minWidth: 800,   // 设置最小宽度  
            //minHeight: 600,  // 设置最小高度  
            webPreferences: {  
                nodeIntegration: true,  
            },  
        });  

        win.loadFile('index.html');  
    }  

    // 创建菜单  
    const menuTemplate = [  
        {  
            label: '文件',  // 汉化的"File"  
            submenu: [  
                {  
                    label: '新建',  // 汉化的"New"  
                    click: () => {  
                        console.log('新建文件');  
                    }  
                },  
                {  
                    label: '打开',  // 汉化的"Open"  
                    click: () => {  
                        console.log('打开文件');  
                    }  
                },  
                { type: 'separator' }, // 分隔符  
                {  
                    label: '退出',  // 汉化的"Quit"  
                    role: 'quit',   // 自动处理退出  
                },  
            ]  
        },  
        {  
            label: '编辑',  // 汉化的"Edit"  
            submenu: [  
                {  
                    label: '撤销',  // 汉化的"Undo"  
                    role: 'undo'  
                },  
                {  
                    label: '重做',  // 汉化的"Redo"  
                    role: 'redo'  
                },  
                { type: 'separator' },  
                {  
                    label: '剪切',  // 汉化的"Cut"  
                    role: 'cut'  
                },  
                {  
                    label: '复制',  // 汉化的"Copy"  
                    role: 'copy'  
                },  
                {  
                    label: '粘贴',  // 汉化的"Paste"  
                    role: 'paste'  
                },  
            ]  
        },  
        {  
            label: '视图',  // 汉化的"View"  
            submenu: [  
                {  
                    label: '重载',  // 汉化的"Reload"  
                    role: 'reload'  
                },  
                {  
                    label: '全屏',  // 汉化的"Toggle Full Screen"  
                    role: 'togglefullscreen'  
                },  
            ]  
        },  
        {  
            label: '窗口',  // 汉化的"Window"  
            role: 'window'  
        },  
        {  
            label: '帮助',  // 汉化的"Help"  
            submenu: [  
                {  
                    label: '关于',  // 汉化的"About"  
                    click: () => {  
                        console.log('关于应用程序');  
                    }  
                },  
            ]  
        }  
    ];  

    // 设置菜单  
    const menu = Menu.buildFromTemplate(menuTemplate);  
    Menu.setApplicationMenu(menu);  

    app.whenReady().then(createWindow);  

    app.on('window-all-closed', () => {  
        if (process.platform !== 'darwin') app.quit();  
    });  

    app.on('activate', () => {  
        if (BrowserWindow.getAllWindows().length === 0) createWindow();  
    });

  5. 准备你的 HTML、CSS 和 JS 文件：

    • 将你的 index.html、CSS 和 JS 文件放在项目目录中。

  6. 修改 package.json：
    修改 package.json，找到账户中包含 "main": "main.js" 的行，确保它是正确的。

  7. 运行应用：

    1
    npx electron .

  8. 打包为 EXE：
    使用 Electron Builder：

    • 安装 Electron Builder：

      1
      npm install electron-builder --save-dev

    • 在package.json中添加打包配置：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      json"scripts": {  
        "build": "electron-builder"  
      },  
      "build": {  
        "appId": "com.example.myapp",  
        "win": {  
          "target": "nsis"  
        }  
      }

    • 运行打包命令：

      1
      npm run build