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

Question

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

Answer 1

您可以使用 electron-packager and then build a single setup EXE file using InnoSetup 打包您的程序。

Answer 2

好吧...这会起作用，但想法是运行 .exe 而无需将其安装在 pc 中...另一种解决方案是使用 Autoplay media Studio 来包装电子生成的包并制作一个可执行文件或其他解决方案是使用 thinstall vmware ...缺点都是商业性的，因此您必须为它们付费...

Answer 3

你也可以试试electron-boilerplate。其中有 gulp 的 'release' 任务，它将为所有跨平台创建单个准备就绪的可执行文件。您只需要从所有三个平台构建应用程序来生成特定平台executable.So您不需要安装任何第三方工具。

Answer 4

您可以 "wrap" .NET 项目中的整个电子应用程序。然后它创建的单个可执行文件就可以 "internally" 运行电子应用程序。

Answer 5

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

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

(还在纠结选哪个？比较here)

Answer 6

我首先尝试了 electron-packager，但它生成了很多 .dll 文件，但仍然不能运行。

对我有用的是：

npm install
npm run dist --ia32

这产生了一个独立的 exe，运行应用程序不需要其他文件。

Answer 7

由于大多数答案都没有关于打包的分步说明，让我post我是如何打包电子应用程序的。

我们将首先安装 electron-packager。

Electron Packager is a command line tool and Node.js library that bundles Electron-based application source code with a renamed Electron executable and supporting files into folders ready for distribution.

安装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 8

2020 更新 您可以使用 electron-builder 为您的电子应用程序创建可移植的 .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"
    }
  }
}

Answer 9

将电子应用程序打包为可安装或可执行文件。 electron-builder应该是最好的选择。而且它很容易配置，我们也可以使用 electron auto-updater。这是 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

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

Answer 10

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"

Answer 11

有很多解决方案，我建议使用第三个选项，但这些都是我所知道的

使用electron-packager
使用electron-forge
试试这个：

Answer 12

这在 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。因此，在执行运行上面第二点中提到的命令之前，请确保您的硬盘中有足够的 space。

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

MySample.exe

双击 MySample.exe 将启动文件，应用程序可供您使用。另请注意，它将在本地主机上运行。好好享受吧！

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

How to deploy an Electron app as an executable or installable in Windows?

windows

deployment

desktop-application

electron