如何将Electron应用程序部署为Windows中的可执行文件或可安装程序？

Question

我想生成一个唯一的.exe文件来执行app或.msi来安装应用程序.怎么做？

Answer 1

您可以使用electronic-packager打包您的程序,然后使用InnoSetup构建一个设置EXE文件.

Answer 2

有很多好的模块可以生成单个安装程序*exe文件。查看其中任何一个：

• electronics-builder（生成适用于 Windows、Mac 和 Linux 的可执行文件，具有无服务器应用程序自动更新功能、代码签名、发布等，更少样板）

• electro-forge （生成适用于 Windows、Mac 和 Linux 的可执行文件，它不仅打包应用程序，还帮助您创建它们，更多样板文件）

• windows-installer（易于使用，重量轻，仅生成exe文件）

（仍然困惑选择哪一个？在这里比较）

Answer 3

2020 更新 您可以使用electron-builder为您的电子应用程序创建可移植的 .exe 文件。您需要做的就是安装电子生成器，yarn add electron-builder --dev 然后创建一个这样的package.json文件（这仅适用于便携式 .exe）：

{
  "name": "my-electron-app",
  "productName": "electron app",
  "version": "1.0.0",
  "description": "an electron app",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dist": "electron-builder"
  },
  "devDependencies": {
    "electron": "^8.0.2",
    "electron-builder": "^22.3.2"
  },
  "build": {
    "appId": "com.electron.app",
    "win": {
      "target": "portable"
    },
    "portable": {
      "unicode": false,
      "artifactName": "my_electron_app.exe"
    }
  }
}

Answer 4

您也可以尝试使用电子样板.其中有"释放"任务的gulp,它将为所有跨平台创建单个准备好的可执行文件.您只需要从所有三个平台构建应用程序以生成特定的平台可执行文件.因此您无需安装任何第三方工具.

Answer 5

由于大多数答案都没有关于包装的分步说明，因此让我发布如何包装电子应用程序。

我们将首先安装电子包装机。

Electron Packager是一个命令行工具和Node.js库，它将基于Electron的应用程序源代码与重命名的Electron可执行文件和支持文件捆绑在一起，准备分发。

安装electron-packager： 在Windows cmd中运行以下命令

npm install -g electron-packager --save-dev

接下来，让我们为Windowsx64打包我们的应用程序：

electron-packager appdirectory appName --platform=win32 --arch=x64 --electron-version=1.4.3

Answer 6

将电子应用程序打包为可安装或可执行的。electron-builder应该是最好的选择。而且它很容易配置，我们也可以使用电子自动更新程序。这里是一个例子electron-builder.json

{
  "publish": {
    // This can be also 's3', 'github'... based on which server you are using for publish
    // https://www.electron.build/configuration/publish
    "provider": "generic",

    // Feed URL but github provider case, other fields will be required. 'repo', 'owner'...
    "url": "https://myappserver.com/updates/"
  },

  "productName": "My App",
  "appId": "com.myapp.app",

  "directories": {
    // The icon and background in 'buildResources' will be used as app Icon and dmg Background
    "buildResources": "buildResources",

    // output is directory where the packaged app will be placed
    "output": "release"
  },

  // The files which will be packed
  "files": ["src/", "node_modules/", "package.json"],

  "mac": {
    "target": ["dmg", "zip"], // Also can be, 'pkg', ...
    "artifactName": "${productName}-${version}-${os}.${ext}"
  },
  "win": {
    "target": ["nsis", "zip"], // Also can be, 'portable', ...
    "artifactName": "${productName}-${version}-${os}.${ext}"
  },
  "linux": {
    "target": ["AppImage"],
    "artifactName": "${productName}-${version}-${os}.${ext}"
  },
  "dmg": {
    "title": "${productName}-${version}",
    "contents": [
      {
        "x": 300,
        "y": 360
      },
      {
        "x": 490,
        "y": 360,
        "type": "link",
        "path": "/Applications"
      }
    ]
  }
}

当然，我们可以添加其他配置，例如nsis, extraFiles, afterPack, afterSign...

以上都是很好用的。您可以在此处查看详细信息和其他字段https://www.electron.build/configuration/publish

我们可以在内部package.json或作为隔离文件定义此配置，但名称应为electron-builder.json或electron-builder.yml在项目根目录中。

此外，用于自动更新。我们应该将安装程序（dmg、exe、appImage）上传到zip、blockmap和latest-{OS_Name}.yml文件中。

Answer 7

npm install -g electron-packager --save-dev
npx electron-packager <appDirectory> appName --platform=win32 --arch=x64
npx electron-packager <appDirectory> appName --overwrite --asar --electron-version=13.4.0 --platform=win32 --arch=x64 --prune=true --out=release-builds --icon=./build/icon.ico"