如何使用Electron将Phaser开发的HTML5游戏打包导出为EXE可执行文件

1. 安装打包工具 #

推荐使用electron-builder完成构建导出，执行以下命令安装开发依赖：

npm install electron-builder --save-dev

2. 配置项目package.json文件 #

打开项目根目录的package.json，按以下示例调整配置（没有该文件则新建）：

{
  "name": "phaser-game-demo",
  "version": "1.0.0",
  "main": "index.js", // 对应Electron入口js文件路径，确保和实际存储路径一致
  "scripts": {
    "start": "electron .", // 本地预览命令
    "pack": "electron-builder --dir", // 仅生成未压缩的文件夹版本
    "dist": "electron-builder" // 生成可分发的EXE文件
  },
  "build": {
    "appId": "com.custom.phasergame",
    "productName": "我的Phaser小游戏",
    "win": {
      "target": [
        {
          "target": "nsis", // 生成exe安装包，需要单文件便携版可替换为"portable"
          "arch": ["x64"]
        }
      ],
      "icon": "build/icon.ico" // 可自定义exe图标路径，不需要可删除该行
    },
    "nsis": {
      "oneClick": false, // 取消一键安装，显示安装向导
      "allowToChangeInstallationDirectory": true // 允许用户选择安装目录
    }
  }
}

3. 执行打包命令 #

在项目根目录终端执行：

npm run dist

等待构建完成后，生成的EXE文件会存放在项目根目录的dist文件夹下，直接分发该文件即可。

注意事项 #

• 你当前所有资源均使用相对路径引用，无需额外调整路径配置，打包后资源会自动纳入构建产物
• 如果不需要调用Node.js能力，建议把Electron入口文件中nodeIntegration: true改为false，提升应用安全性
• 首次打包会自动下载Electron对应版本的构建依赖，下载速度慢可自行配置npm国内镜像加速

内容的提问来源于stack exchange，提问作者N. Sheik Ahamed Iqbal