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

Question

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

windowsdeploymentdesktop-applicationelectron

86

我希望生成一个唯一的.exe文件以执行应用程序，或者生成一个.msi安装应用程序。如何做到这一点？

- Amirado

1

我发现以下这篇文章非常有帮助，它提供了使用 electron-builder 的示例：https://medium.com/how-to-electron/a-complete-guide-to-packaging-your-electron-app-1bdc717d739f - jsherk

@jsherk 的链接是 404。 - oldboy

1

@oldboy 是的，看起来该用户的帐户已被暂停。但是我在waybackmachine上找到了这篇文章：https://web.archive.org/web/20190119061950/https://medium.com/how-to-electron/a-complete-guide-to-packaging-your-electron-app-1bdc717d739f - jsherk

@jsherk 谢谢。我在此期间已经想出如何解决了。但是，我遇到一个问题，桌面快捷方式图标无法正确显示。您介意看一下我的问题吗？ - oldboy

13个回答

36

由于大多数答案没有关于打包的逐步说明，让我发布一下我是如何打包电子应用程序的。

首先我们需要安装electron-packager。

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

安装electron-packager: 在Windows命令提示符中运行以下命令

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

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

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

- Tharif

2

我很感激你的回答。我认为当人们说“答案是x，这是如何做到的”而不是“只需使用x”时，会更有帮助。 - zfrisch

1

@zfrisch :) 很高兴你喜欢这篇文章。 - Tharif

1

仅补充一下，我发现在MacOS上运行此命令需要安装wine 可以通过多种方式安装，我使用了brew install wine。 - Matt

20

2020 更新 您可以使用electron-builder为您的Electron应用程序创建便携式.exe文件。您只需要使用yarn add electron-builder --dev安装electron-builder，然后创建一个像这样的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"
    }
  }
}

- panbak

10

有很多优秀的模块可以生成单个安装程序*exe文件。请查看以下任何一个：

electron-builder（可生成Windows、Mac和Linux的可执行文件，具有无服务器应用程序自动更新功能、代码签名、发布等功能，减少样板文件）
electron-forge（可为Windows、Mac和Linux生成可执行文件，不仅打包应用程序，还可以帮助您创建它们，更多样板文件）
windows-installer（易于使用，轻量级，仅生成exe文件）

(仍然不确定该选择哪一个？在此处进行比较：here)

- GorvGoyl

7

你也可以尝试使用electron-boilerplate。它有gulp的'release'任务，它将为所有跨平台创建单个可执行文件。您只需要从所有三个平台构建应用程序以生成特定平台的可执行文件。因此，您不需要安装任何第三方工具。

- Anavar Bharmal

7

将Electron应用程序打包成可安装或可执行文件，electron-builder 是最佳选择。它易于配置，我们还可以使用 electron 自动更新工具。这是一个 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文件。

- tpikachu

1

很棒。这对我很有帮助。谢谢。 - True

很酷。非常有帮助的评论。 - bli07

5

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"

- Osei-Owusu

使用 electron-packager -- 希望这有所帮助 - Osei-Owusu

2

以下是我在2021/2022年使用的方法:

全局安装Electron Packager。在命令提示符中运行以下命令：

npm install electron-packager -g

在命令提示符中运行以下命令：

electron-packager D:\sample MySample --platform=win32 --arch=x64

上述命令将显示以下输出：

Packaging app for platform win32 x64 using electron v16.0.5

大约5-10分钟后，它会创建包含必要文件的文件夹，并在屏幕上显示以下输出：

Wrote new app to D:\sample\MySample-win32-x64

在我的情况下，上述输出目录的大小为1.09 GB。因此，在运行上述第二点中提到的命令之前，请确保您的硬盘有足够的空间。

如果您导航到上述目录，您将看到其中的以下EXE文件：

MySample.exe

双击MySample.exe将启动带有应用程序的文件，准备供您使用。还请注意，它将在localhost上运行。所以尽情享受吧！

- Devner

对我来说，它失败了，并显示错误信息“(node:12480) electron: Failed to load URL: http://localhost:3000/main_window with error: ERR_CONNECTION_REFUSED”。这个地址是在webpack生成的index.js中请求的：“exports.mainWindow.loadURL('http://localhost:3000/main_window')”。有什么想法吗？ - sntrcode

不看你的代码，这里有一些建议：1. 在项目的index.html中，确保基础标签是这样的：<base href="./" />。2. 然后，确保路由正确。3. main_window是什么？那是你使用app-routing.module.ts文件路由到默认组件/页面吗？如果是，请先尝试在本地运行项目，然后再尝试创建Windows应用程序。尝试上述方法并检查是否有帮助。 - Devner

1

您需要安装electron-packager。

您可以按照以下步骤进行操作。

# for use in npm scripts
npm install electron-packager --save-dev

# for use from cli
npm install electron-packager -g

electron-packager <sourcedir> <appname> --platform=win32 --arch=x64

这里是一个示例命令。

electron-packager . app --platform win32 --arch x64 --out dist/

- xorozo

1

嗯...这个方法可以工作，但是想法是在不需要在电脑上安装的情况下运行.exe文件...另一个解决方案是使用Autoplay media Studio来包装你通过electron生成的软件包，并制作一个可执行文件，或者另一种解决方案是使用thinstall vmware...缺点是两种都是商业软件，所以你必须付费...

- Wilmar Barb

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex Warren · Accepted Answer

55

你可以使用 electron-packager 打包程序，然后使用 InnoSetup 构建单个安装 EXE 文件。

- Alex Warren

谢谢Alex，我使用electron-packager打包了应用程序，但是我得到的文件具有.dll扩展名，对我来说最好的解决方案是像Mac OS替代品一样只有一个单独的文件，不需要安装。还有其他方法吗？ - Amirado

1

据我所知，Mac的.app文件实际上是一个文件包，只是操作系统将其隐藏起来了。而在Windows中并没有类似的东西。因此，如果您想要分发单个EXE文件，它必须是安装文件或者类似于自解压缩ZIP文件的东西。 - Alex Warren

您可以使用7zip创建自解压归档文件。它只是一个打包成EXE的ZIP文件 - 运行时会自动解压缩。 - Alex Warren

3

刚刚使用 electron-packager 构建了我的应用程序，但我的源文件没有被编译，这正常吗？ :) 我以为所有的东西都会放在 exe 文件里面？ :( - NiCk Newman

看起来实际的单个可执行文件支持需要对 Electron 本身进行上游更改：https://github.com/electron-userland/electron-packager/issues/628 :-( - Ciro Santilli OurBigBook.com

显示剩余6条评论