利用Electron将项目前端网页打包成桌面应用

Author： cfscc
发布时间：February 5, 2023
489 views
No comments
28772 words
Categories：程序代码

![1ead92bb1d80003ba4193cff56951925_70.png](http://www.cfscc.com/usr/uploads/2023/02/266315518.png)

一、环境搭建

1.全局安装node.js

2.全局安装electron

npm install electron -g
3.准备好要打包的html/js/css等网页文件
二、进行打包

首先，我们要明白electron打包的文件架构：
你的项目目录/

```
{
  "name"    : "app-name",
  "version" : "0.1.0",
  "main"    : "main.js"
}
```

在web项目目录下分别创建package.json、main.js、index.html文件

package.json中是一些配置性文件，json格式，写上如下代码：

```
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
 
let win
 
function createWindow () {
  win = new BrowserWindow({width: 800, height: 600})
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
 
  win.on('closed', () => {
    win = null
  })
}
 
app.on('ready', createWindow)
 
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
 
app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})
————————————————
版权声明：本文为CSDN博主「宇宙无敌帅超人」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_40896352/article/details/80039292
```

接下来在所要打包的项目目录中打开DOS界面，npm安装electron-package：

npm install electron-package -g

*再接着输入electron-package .  (生成exe文件的名字)  --win  --out  (打包完文件夹的名字)  -arch=×64  --electronVersion      (electron的版本号)    --overwrite  --ignore=node_modules即可完成打包*

![image.png](http://www.cfscc.com/usr/uploads/2023/02/2034963723.png)

**cnpm install --save-dev electron-packager**

最后进入打包文件夹，找到.exe文件，点击打开即可
三、注意事项

1.输入打包命令时，千万要注意所安装的electron的版本。

2. .后面加生成exe文件的名字要加空格

3.--electronVersion很多经验文章都写成了--version导致解压报错
————————————————
版权声明：本文为CSDN博主「宇宙无敌帅超人」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_40896352/article/details/80039292

# 应用程序打包

要使用 Electron 分发你的应用，需要打包并重命名它。 为此，您既可使用专用工具，也可以手动操作。

## 专用工具[](https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution#专用工具 "直接链接到标题")

有几种工具可以打包和分发您的Electron应用程序。 我们建议使用 [Electron Forge](https://www.electronjs.org/zh/docs/latest/tutorial/forge-overview)。 你可以直接查看他们的 [documentation](https://www.electronforge.io/), 或者参考 [Packaging and Distribution](https://www.electronjs.org/zh/docs/latest/tutorial/%E6%89%93%E5%8C%85%E6%95%99%E7%A8%8B) 章节的 Electron 教程.

## 手动打包[](https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution#手动打包 "直接链接到标题")

如果您更喜欢手动操作，有两种方法可以分发应用程序：

* 使用预构建可执行文件
* 应用程序源代码存档

### 使用预构建可执行文件[](https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution#使用预构建可执行文件 "直接链接到标题")

为了使用 Electron 部署你的应用程序，你需要下载 Electron 的 [prebuilt binaries](https://github.com/electron/electron/releases)。 接下来，你存放应用程序的文件夹需要叫做 `app` 并且需要放在 Electron 的 资源文件夹Resources下，如下面的示例所示。

NOTE

Electron预构建的二进制文件的位置 在下面的示例中用 `electron/` 表示。

macOS

```plain
electron/Electron.app/Contents/Resources/app/
├── package.json
├── main.js
└── index.html
```

Windows and Linux

```plain
electron/resources/app
├── package.json
├── main.js
└── index.html
```

然后在 macOS上执行 `Electron.app` ，在 Linux 上执行 `electron` 或 在 Windows上执行`electron.exe`, 随后 Electron 将作为你的应用启动。 然后， `electron` 目录将作为您的分发产品交付给用户。

### 打包应用源码 (asar)[](https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution#打包应用源码-asar "直接链接到标题")

如果你没有使用 Parcel 或 Webpack 之类的构建工具，为了减轻拷贝源文件的分发压力，你可以把你的 app 打包成一个 [asar](https://github.com/electron/asar) 包来提升在 Windows 等平台上读取文件的性能。

为了使用一个 `asar` 档案文件代替 `app` 文件夹，你需要修改这个档案文件的名字为 `app.asar` ， 然后将其放到 Electron 的资源文件夹下，然后 Electron 就会试图读取这个档案文件并从中启动。 如下所示：

macOS

```plain
electron/Electron.app/Contents/Resources/
└── app.asar
```

Windows

```plain
electron/resources/
└── app.asar
```

你可以在 [`electron/asar` 存储库 ](https://github.com/electron/asar)中找到有关如何使用 `asar` 的更多详细信息。

### 使用下载好的可执行文件进行重新定制[](https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution#使用下载好的可执行文件进行重新定制 "直接链接到标题")

将您的应用程序捆绑到Electron后，您可能需要在把应用分发给用户前将Electron进行重新定制

* **Windows:** 您可以将`electon.exe`重命名为您喜欢的任何名称，也可以通过[rcedit](https://github.com/electron/rcedit)编辑其图标和其他信息。
* **Linux：** 您可以将 `electron` 可执行文件重命名为您喜欢的任何名称。
* **macOS：** 您可以将 `Electron.app` 重命名为所需的任何名称，并且还必须 以下 文件中的 `CFBundleDisplayName`， `CFBundleIdentifier` 和 `CFBundleName` 字段重命名：

* `Electron.app/Contents/Info.plist`
  * `Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist`

你也可以重命名帮助程序以避免它在系统活动监视器中显示为`Electron Helper`， 但是请确保你已经修改了帮助应用的可执行文件的名字。
  一个重命名后的应用程序的结构可能是这样的

```plain
MyApp.app/Contents
├── Info.plist
├── MacOS/
│ └── MyApp
└── Frameworks/
    └── MyApp Helper.app
        ├── Info.plist
        └── MacOS/
            └── MyApp Helper
```

NOTE

你也可以通过改变产品名称后从源码构建来重塑Electron的形象。 你只需要在 `args.gn` 文件中将构建参数设置为对应产品的名称(`electron_product_name = "YourProductName"`)，并进行重新构建。

请记住，我们不建议这样做，因为配置环境以从源代码编译 并非易事，并且需要花费大量时间。

应用程序打包 | Electron
https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution

# Index of /electron/22.2.0/

| ![[ICO]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*v6fRRLopV_0AAAAAAAAAAAAAARQnAQ) | [Name](https://registry.npmmirror.com/binary.html?path=electron/22.2.0/&sort=desc)                                                                               | Last modified        | Size     |
| ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | ---------- |
| <hr/>                                                                                           |                                                                                                                                                                  |                      |          |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*3QmJSqp2zpUAAAAAAAAAAAAAARQnAQ) | [Parent Directory](https://registry.npmmirror.com/binary.html?path=electron/)                                                                                    |                      | -        |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [chromedriver-v22.2.0-darwin-arm64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/chromedriver-v22.2.0-darwin-arm64.zip)                           | 2023-02-01T19:03:22Z | 12.94MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [chromedriver-v22.2.0-darwin-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/chromedriver-v22.2.0-darwin-x64.zip)                               | 2023-02-01T19:14:02Z | 14.89MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [chromedriver-v22.2.0-linux-arm64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/chromedriver-v22.2.0-linux-arm64.zip)                             | 2023-02-01T16:46:37Z | 140.18MB |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [chromedriver-v22.2.0-linux-armv7l.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/chromedriver-v22.2.0-linux-armv7l.zip)                           | 2023-02-01T16:40:31Z | 19.02MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [chromedriver-v22.2.0-linux-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/chromedriver-v22.2.0-linux-x64.zip)                                 | 2023-02-01T16:50:00Z | 141.01MB |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [chromedriver-v22.2.0-mas-arm64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/chromedriver-v22.2.0-mas-arm64.zip)                                 | 2023-02-01T19:03:10Z | 12.94MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [chromedriver-v22.2.0-mas-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/chromedriver-v22.2.0-mas-x64.zip)                                     | 2023-02-01T19:15:54Z | 14.89MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [chromedriver-v22.2.0-win32-arm64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/chromedriver-v22.2.0-win32-arm64.zip)                             | 2023-02-01T16:44:37Z | 12.57MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [chromedriver-v22.2.0-win32-ia32.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/chromedriver-v22.2.0-win32-ia32.zip)                               | 2023-02-01T16:43:10Z | 12.81MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [chromedriver-v22.2.0-win32-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/chromedriver-v22.2.0-win32-x64.zip)                                 | 2023-02-01T16:42:45Z | 13.21MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-api.json](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-api.json)                                                                   | 2023-02-01T19:08:16Z | 1.40MB   |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-darwin-arm64-dsym-snapshot.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-darwin-arm64-dsym-snapshot.zip)       | 2023-02-01T19:03:17Z | 839.83KB |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-darwin-arm64-symbols.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-darwin-arm64-symbols.zip)                   | 2023-02-01T19:00:00Z | 78.02MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-darwin-arm64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-darwin-arm64.zip)                                   | 2023-02-01T18:59:43Z | 83.62MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-darwin-x64-symbols.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-darwin-x64-symbols.zip)                       | 2023-02-01T19:08:14Z | 97.98MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-darwin-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-darwin-x64.zip)                                       | 2023-02-01T19:07:55Z | 88.02MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-linux-arm64-debug.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-linux-arm64-debug.zip)                         | 2023-02-01T16:46:29Z | 839.33KB |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-linux-arm64-symbols.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-linux-arm64-symbols.zip)                     | 2023-02-01T16:46:28Z | 85.50MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-linux-arm64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-linux-arm64.zip)                                     | 2023-02-01T16:46:23Z | 89.59MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-linux-armv7l-debug.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-linux-armv7l-debug.zip)                       | 2023-02-01T16:40:27Z | 839.33KB |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-linux-armv7l-symbols.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-linux-armv7l-symbols.zip)                   | 2023-02-01T16:40:25Z | 81.28MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-linux-armv7l.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-linux-armv7l.zip)                                   | 2023-02-01T16:40:21Z | 78.89MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-linux-x64-symbols.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-linux-x64-symbols.zip)                         | 2023-02-01T16:49:04Z | 99.90MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-linux-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-linux-x64.zip)                                         | 2023-02-01T16:48:59Z | 89.10MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-mas-arm64-dsym-snapshot.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-mas-arm64-dsym-snapshot.zip)             | 2023-02-01T19:03:03Z | 839.83KB |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-mas-arm64-symbols.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-mas-arm64-symbols.zip)                         | 2023-02-01T18:59:41Z | 77.25MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-mas-arm64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-mas-arm64.zip)                                         | 2023-02-01T18:59:23Z | 82.74MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-mas-x64-symbols.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-mas-x64-symbols.zip)                             | 2023-02-01T19:10:06Z | 96.96MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-mas-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-mas-x64.zip)                                             | 2023-02-01T19:09:47Z | 87.06MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-win32-arm64-symbols.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-win32-arm64-symbols.zip)                     | 2023-02-01T16:44:01Z | 31.85MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-win32-arm64-toolchain-profile.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-win32-arm64-toolchain-profile.zip) | 2023-02-01T16:48:05Z | 88.31KB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-win32-arm64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-win32-arm64.zip)                                     | 2023-02-01T16:43:58Z | 89.99MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-win32-ia32-symbols.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-win32-ia32-symbols.zip)                       | 2023-02-01T16:42:28Z | 52.42MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-win32-ia32-toolchain-profile.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-win32-ia32-toolchain-profile.zip)   | 2023-02-01T16:46:22Z | 88.31KB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-win32-ia32.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-win32-ia32.zip)                                       | 2023-02-01T16:42:24Z | 86.97MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-win32-x64-symbols.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-win32-x64-symbols.zip)                         | 2023-02-01T16:42:00Z | 39.79MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-win32-x64-toolchain-profile.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-win32-x64-toolchain-profile.zip)     | 2023-02-01T16:45:40Z | 88.31KB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron-v22.2.0-win32-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron-v22.2.0-win32-x64.zip)                                         | 2023-02-01T16:41:57Z | 92.54MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [electron.d.ts](https://registry.npmmirror.com/-/binary/electron/22.2.0/electron.d.ts)                                                                           | 2023-02-01T19:08:17Z | 736.00KB |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [ffmpeg-v22.2.0-darwin-arm64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/ffmpeg-v22.2.0-darwin-arm64.zip)                                       | 2023-02-01T19:03:18Z | 709.71KB |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [ffmpeg-v22.2.0-darwin-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/ffmpeg-v22.2.0-darwin-x64.zip)                                           | 2023-02-01T19:13:56Z | 761.49KB |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [ffmpeg-v22.2.0-linux-arm64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/ffmpeg-v22.2.0-linux-arm64.zip)                                         | 2023-02-01T16:46:32Z | 3.54MB   |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [ffmpeg-v22.2.0-linux-armv7l.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/ffmpeg-v22.2.0-linux-armv7l.zip)                                       | 2023-02-01T16:40:29Z | 3.46MB   |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [ffmpeg-v22.2.0-linux-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/ffmpeg-v22.2.0-linux-x64.zip)                                             | 2023-02-01T16:49:55Z | 3.63MB   |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [ffmpeg-v22.2.0-mas-arm64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/ffmpeg-v22.2.0-mas-arm64.zip)                                             | 2023-02-01T19:03:05Z | 709.71KB |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [ffmpeg-v22.2.0-mas-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/ffmpeg-v22.2.0-mas-x64.zip)                                                 | 2023-02-01T19:15:49Z | 761.48KB |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [ffmpeg-v22.2.0-win32-arm64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/ffmpeg-v22.2.0-win32-arm64.zip)                                         | 2023-02-01T16:44:34Z | 728.91KB |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [ffmpeg-v22.2.0-win32-ia32.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/ffmpeg-v22.2.0-win32-ia32.zip)                                           | 2023-02-01T16:43:08Z | 768.80KB |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [ffmpeg-v22.2.0-win32-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/ffmpeg-v22.2.0-win32-x64.zip)                                             | 2023-02-01T16:42:43Z | 803.17KB |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [hunspell_dictionaries.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/hunspell_dictionaries.zip)                                                   | 2023-02-01T16:50:06Z | 32.81MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [libcxx-objects-v22.2.0-linux-arm64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/libcxx-objects-v22.2.0-linux-arm64.zip)                         | 2023-02-01T16:46:31Z | 4.38MB   |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [libcxx-objects-v22.2.0-linux-armv7l.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/libcxx-objects-v22.2.0-linux-armv7l.zip)                       | 2023-02-01T16:40:28Z | 1.91MB   |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [libcxx-objects-v22.2.0-linux-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/libcxx-objects-v22.2.0-linux-x64.zip)                             | 2023-02-01T16:49:51Z | 4.37MB   |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [libcxxabi_headers.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/libcxxabi_headers.zip)                                                           | 2023-02-01T16:49:54Z | 8.83KB   |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [libcxx_headers.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/libcxx_headers.zip)                                                                 | 2023-02-01T16:49:53Z | 1.30MB   |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [mksnapshot-v22.2.0-darwin-arm64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/mksnapshot-v22.2.0-darwin-arm64.zip)                               | 2023-02-01T19:03:34Z | 55.93MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [mksnapshot-v22.2.0-darwin-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/mksnapshot-v22.2.0-darwin-x64.zip)                                   | 2023-02-01T19:14:14Z | 56.90MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [mksnapshot-v22.2.0-linux-arm64-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/mksnapshot-v22.2.0-linux-arm64-x64.zip)                         | 2023-02-01T16:46:43Z | 122.51MB |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [mksnapshot-v22.2.0-linux-armv7l-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/mksnapshot-v22.2.0-linux-armv7l-x64.zip)                       | 2023-02-01T16:40:34Z | 64.57MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [mksnapshot-v22.2.0-linux-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/mksnapshot-v22.2.0-linux-x64.zip)                                     | 2023-02-01T16:50:04Z | 58.65MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [mksnapshot-v22.2.0-mas-arm64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/mksnapshot-v22.2.0-mas-arm64.zip)                                     | 2023-02-01T19:03:23Z | 55.93MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [mksnapshot-v22.2.0-mas-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/mksnapshot-v22.2.0-mas-x64.zip)                                         | 2023-02-01T19:16:07Z | 56.90MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [mksnapshot-v22.2.0-win32-arm64-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/mksnapshot-v22.2.0-win32-arm64-x64.zip)                         | 2023-02-01T16:44:40Z | 58.79MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [mksnapshot-v22.2.0-win32-ia32.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/mksnapshot-v22.2.0-win32-ia32.zip)                                   | 2023-02-01T16:43:13Z | 56.09MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [mksnapshot-v22.2.0-win32-x64.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/mksnapshot-v22.2.0-win32-x64.zip)                                     | 2023-02-01T16:42:49Z | 65.24MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [SHASUMS256.txt](https://registry.npmmirror.com/-/binary/electron/22.2.0/SHASUMS256.txt)                                                                         | 2023-02-01T19:18:55Z | 7.42KB   |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [v22.2.0.tar.gz](https://registry.npmmirror.com/-/binary/electron/22.2.0/v22.2.0.tar.gz)                                                                         | 2023-02-01T19:22:25Z | 10.03MB  |
| ![[DIR]](https://gw.alipayobjects.com/mdn/rms_fa382b/afts/img/A*FKvWRo-vns4AAAAAAAAAAAAAARQnAQ) | [v22.2.0.zip](https://registry.npmmirror.com/-/binary/electron/22.2.0/v22.2.0.zip)                                                                               | 2023-02-01T19:22:25Z | 11.14MB  |

CNPM Binaries Mirror
https://registry.npmmirror.com/binary.html?path=electron/22.2.0/

首先确保Electron 程序可以运行

安装打包工具，我是使用的electron-packager，首先全局安装一下：

npm install electron-packager -g
在根目录下执行

npm start

编辑package.json，npm安装局部依赖

{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^7.0.0"
}
}

执行

npm install
执行

npm start
记住版本号

electron -v
在app根目录执行打包命令

electron-packager . 'HelloWorld' --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1
打包成功

打开就可以运行

参考:https://www.cnblogs.com/ljbmvp/p/8437931.html
————————————————
版权声明：本文为CSDN博主「qq_31683775」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_31683775/article/details/102859830

electron中隐藏顶部菜单、隐藏顶部最大化、最小化、关闭按钮以及自定最大化、最小化 、关闭按钮。

哈哈哈哈哈itying

于 2019-11-28 09:49:38 发布

2218
收藏 2
文章标签： electron中隐藏顶部菜单 隐藏顶部最大化、最小化、关闭按钮 electron自定最大化、最小化 、关闭按钮
版权
electron中隐藏顶部菜单、隐藏顶部最大化、最小化、关闭按钮以及自定最大化、最小化 、关闭按钮。

如果您想学Electron视频教程请访问：

【Electron视频教程下载地址】

Electron实战视频教程_Electron-Vue3、Electron-React、Electron-Angular打造舆情监控系统（已完结123讲）_IT营
https://www.itying.com/goods-929.html

1、electron中隐藏顶部菜单

mainWindow.setMenu(null)

2、electron 中隐藏关闭 最大化 最小化按钮

mainWindow = new BrowserWindow({
height: 620,
useContentSize: true,
width: 1280
frame: false   /*去掉顶部导航  去掉关闭按钮  最大化最小化按钮*/

})

3、electron-vue 自定义关闭 最大化 最小化按钮

ipc.on('window-min',function(){
mainWindow.minimize();
})
//登录窗口最大化
ipc.on('window-max',function(){
if(mainWindow.isMaximized()){
mainWindow.restore();
}else{
mainWindow.maximize();
}
})
ipc.on('window-close',function(){
mainWindow.close();
})

4、electron自定义导航可拖拽

可拖拽的css:

-webkit-app-region: drag;

不可拖拽的css:

-webkit-app-region: no-drag;
————————————————
版权声明：本文为CSDN博主「哈哈哈哈哈itying」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/htzhanglong/article/details/81515875

Last modification：February 5, 2023

如果觉得我的文章对你有用，请随意赞赏

利用Electron将项目前端网页打包成桌面应用

cfscc • 2023 年 02 月 05 日

![1ead92bb1d80003ba4193cff56951925_70.png](http://www.cfscc.com/usr/uploads/2023/02/266315518.png)

一、环境搭建

1.全局安装node.js

2.全局安装electron

npm install electron -g
3.准备好要打包的html/js/css等网页文件
二、进行打包

首先，我们要明白electron打包的文件架构：
你的项目目录/

```
{
  "name"    : "app-name",
  "version" : "0.1.0",
  "main"    : "main.js"
}
```

在web项目目录下分别创建package.json、main.js、index.html文件

package.json中是一些配置性文件，json格式，写上如下代码：

接下来在所要打包的项目目录中打开DOS界面，npm安装electron-package：

npm install electron-package -g

![image.png](http://www.cfscc.com/usr/uploads/2023/02/2034963723.png)

**cnpm install --save-dev electron-packager**

最后进入打包文件夹，找到.exe文件，点击打开即可
三、注意事项

1.输入打包命令时，千万要注意所安装的electron的版本。

2. .后面加生成exe文件的名字要加空格

# 应用程序打包

要使用 Electron 分发你的应用，需要打包并重命名它。 为此，您既可使用专用工具，也可以手动操作。

## 专用工具[](https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution#专用工具 "直接链接到标题")

## 手动打包[](https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution#手动打包 "直接链接到标题")

如果您更喜欢手动操作，有两种方法可以分发应用程序：

* 使用预构建可执行文件
* 应用程序源代码存档

### 使用预构建可执行文件[](https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution#使用预构建可执行文件 "直接链接到标题")

NOTE

Electron预构建的二进制文件的位置 在下面的示例中用 `electron/` 表示。

macOS

```plain
electron/Electron.app/Contents/Resources/app/
├── package.json
├── main.js
└── index.html
```

Windows and Linux

```plain
electron/resources/app
├── package.json
├── main.js
└── index.html
```

### 打包应用源码 (asar)[](https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution#打包应用源码-asar "直接链接到标题")

macOS

```plain
electron/Electron.app/Contents/Resources/
└── app.asar
```

Windows

```plain
electron/resources/
└── app.asar
```

你可以在 [`electron/asar` 存储库 ](https://github.com/electron/asar)中找到有关如何使用 `asar` 的更多详细信息。

将您的应用程序捆绑到Electron后，您可能需要在把应用分发给用户前将Electron进行重新定制

* `Electron.app/Contents/Info.plist`
  * `Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist`

NOTE

请记住，我们不建议这样做，因为配置环境以从源代码编译 并非易事，并且需要花费大量时间。

应用程序打包 | Electron
https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution

# Index of /electron/22.2.0/

CNPM Binaries Mirror
https://registry.npmmirror.com/binary.html?path=electron/22.2.0/

首先确保Electron 程序可以运行

安装打包工具，我是使用的electron-packager，首先全局安装一下：

npm install electron-packager -g
在根目录下执行

npm start

编辑package.json，npm安装局部依赖

执行

npm install
执行

npm start
记住版本号

electron -v
在app根目录执行打包命令

electron-packager . 'HelloWorld' --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1
打包成功

打开就可以运行

electron中隐藏顶部菜单、隐藏顶部最大化、最小化、关闭按钮以及自定最大化、最小化 、关闭按钮。

哈哈哈哈哈itying

于 2019-11-28 09:49:38 发布

如果您想学Electron视频教程请访问：

【Electron视频教程下载地址】

Electron实战视频教程_Electron-Vue3、Electron-React、Electron-Angular打造舆情监控系统（已完结123讲）_IT营
https://www.itying.com/goods-929.html

1、electron中隐藏顶部菜单

mainWindow.setMenu(null)

2、electron 中隐藏关闭 最大化 最小化按钮

mainWindow = new BrowserWindow({
height: 620,
useContentSize: true,
width: 1280
frame: false   /*去掉顶部导航  去掉关闭按钮  最大化最小化按钮*/

})

3、electron-vue 自定义关闭 最大化 最小化按钮

4、electron自定义导航可拖拽

可拖拽的css:

-webkit-app-region: drag;

不可拖拽的css:

Leave a Comment Cancel reply 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

利用Electron将项目前端网页打包成桌面应用

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款