使用 Electron 打包项目构建 .EXE 桌面应用程序（简）

本篇内容讲述如何使用 Electron 打包项目来构建桌面应用程序，内容比较简单（入门级），适合想体验将项目打包成桌面程序的朋友，如果你对自己项目打包成桌面应用程序也感兴趣的话，那么可以继续往下看看。

Electron 官网 | Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。

一、准备工作

本期内容还是同之前的一样，使用 Vue-Cli 脚手架创建的 Vue 项目作为演示，同理，这个并不是重点，因为构建打包与项目本身涉及的内容并没有多大的关系（Electron是一个使用 HTML 和 CSS 以及 JavaScript 构建桌面应用程序的框架）。在实际当中我们所使用的项目不同，所以我们就不再项目当中来去演示操作。

以 Vue 作为演示项目（你可以用自己的）；
VScode（项目打包 / 编码工具）；

------ 非必须的，全部使用命令窗口也是可以的，使用编码工具是需要编写一些配置文件，当然你要用记事本或者Notepad++都是可以的，这些完全取决你的使用习惯了。

Node.js + Electron（待安装使用）；

下面进入正题：

二、打包项目（dist）

使用 Vue-Cli 脚手架创建如下的项目进行演示；

下面我们使用如下命令来讲项目进行打包 dist 文件夹，当然如果你的项目中安装使用了 webpack 、docker、vite 等一些工具就用对应打包的命令即可。

复制代码

npm run build

打包项目完成之后就会有一个 dist 文件夹，这个dist文件夹就是我们下面需要用到的。

三、安装 Electron

安装 Electron 之前，需要确保 Node 已经安装，使用如下命令确认 Node 环境：

复制代码

node -v

npm -v

快捷键【Win + R】打开输入【cmd】弹出命令窗口，输入命令后有的话会有对应的版本号输出：

有对应的版本号输入我们就继续，没有的话就需要搭一下 Node 环境。

附：一、Node.js 环境安装 (详)

3.1 初始化项目

这里我们新建一个文件夹并命名为 Hellowrod ，打开命令窗口， 切换到当前文件夹的目录下，输入如下命令初始化项目：

复制代码

npm init

这个命令需要你自己输入一些配置信息，比如项目名称，版本,描述，索引等等信息，这些你可以自己按照你的项目填写；或者输入如下命令默认初始化创建，后续你在自行修改也可以。

复制代码

npm init -y

3.2 安装 Electron / Electron:builder

输入如下命令安装 Electron / Electron:builder (打包)；

复制代码

npm install electron --save-dev

复制代码

npm install electron-builder --save-dev

以上我们就安装完成了。

3.3 添加 package.json 脚本命令

安装完成 Election/Election:builder 后，我们需要在 package.json 文件中添加对应的脚本命令才可以使用；

打开 package.json 文件：

往 "script" 字段中来去添加构建命令：

使用 "start": "electron ." 也是可以的，按你自己的来；

javascript 复制代码

{
  "name": "helloword",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"electron": "electron .",
	"electron:build": "electron-builder"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs",
  "devDependencies": {
    "electron": "^42.0.0",
    "electron-builder": "^26.8.1"
  }
}

到这里我们就完成安装以及命令的构建，下面我们就来拷贝项目进来并配置相关的文件。

四、配置

4.1 拷贝项目 dist

首先将 dist 文件夹拷贝到我们的项目的根目录下；

4.2 main.js 文件

在上面的 package.json 文件中我们填写了主要文件(main) 为 main.js，在目录下来去创建一个js文件并命名为 main.js 文件。

用编码工具来去打开 main .js 文件，，并添加如下代码内容：

（ createWindow 是创建这个程序窗口，通过 width 和 height 来设置窗口的宽高，win.loadFile 则是窗口所加载的文件，即 dist 文件夹下的 index.html 文件。）

javascript 复制代码

const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('./dist/index.html')
}

app.whenReady().then(() => {
  createWindow()
})

添加完成之后，我们来去输入如下命令测试一下：

script 字段编写 electron : electron . 用如下命令；

javascript 复制代码

npm run electron

script 字段编写 start : electron . 用如下命令

javascript 复制代码

npm run start

首次运行会出现【Dowloading Electron Binary ...】，这是在下载 Electron 的二进制文件，等等下载完成即可，虽然会自行运行项目；

可以在如下图片中看到，创建了一个弹窗并加载了我们的项目内容；

4.3 build 打包配置

在 package.json 中添加 "build" 打包字段，内容如下：

（有 appId 唯一标识，一般是反向域名填写，这里我们就随便写个代入了；productName 是项目的名称；files是指定要打包进Electron应用的文件或目录；不在files字段中的内容都将不会被打包进去；win字段则是 windows 平台的打包配置，target 值为 nsis就是打包的目标格式为 nsis 安装包，NSIS 是 Windows 上常用的安装包制作工具，会生成 .exe 格式的桌面程序安装包；icon也就是图标的配置了，需要准备一个图标命名为icons，这里是根目录下的 icons.ico 图标文件;下载镜像配置 electronDownload 指向Electron二进制文件的下载地址；nsis 字段中两个从英文内容也可以大致知道第一个 createDesktopShortcut 就是创建桌面快捷方式，第二个 createStartMenuShortcut 则是创建开始菜单中应用快捷方式，这里也还可以添加其他配置，如设置安装路径，许可协议，安装所使用的界面语言内容等等。）

javascript 复制代码

  "build":{
	"appId": "com.helloword.say",
    "productName": "HelloWord",
    "files": [
      "dist/**/*",
      "main.js"
    ],
    "win": {
      "target": "nsis",
      "icon": "icons"
    },
	"electronDownload": {
      "mirror": "https://npmmirror.com/mirrors/electron/"
    },
    "nsis": {
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true
    }
  }

下载镜像配置

build 中的 "electronDownload" 项 mirror 指向 Electron 二进制文件下载的镜像地址，这里用的是国内的npm镜像站，解决国内网络环境下，electron 官方镜像下载慢失败的问题，下面提供几个镜像链接，会上高速的会用的就用，不会的后面作者补充离线的方式，大家用离线的方式就好了。

1. 阿里云镜像

javascript 复制代码

"electronDownload": {
  "mirror": "https://npmmirror.com/mirrors/electron/"
}

2. 腾讯云镜像

javascript 复制代码

"electronDownload": {
  "mirror": "https://mirrors.cloud.tencent.com/npm/electron/"
}

3. 中国科学技术大学镜像

javascript 复制代码

"electronDownload": {
  "mirror": "https://mirrors.ustc.edu.cn/electron/"
}

4.4 package.json 参考

javascript 复制代码

{
  "name": "helloword",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "electron": "electron .",
    "electron:build": "electron-builder"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs",
  "devDependencies": {
    "electron": "^42.0.0",
    "electron-builder": "^26.8.1"
  },
  "build": {
    "appId": "com.helloword.say",
    "productName": "HelloWord",
    "files": [
      "dist/**/*",
      "main.js"
    ],
    "win": {
      "target": "nsis",
      "icon": "icons"
    },
    "electronDownload": {
      "mirror": "https://npmmirror.com/mirrors/electron/"
    },
    "nsis": {
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true
    }
  }
}

五、打包

打开命令窗口工具，输入如下的打包命令进行打包：

javascript 复制代码

npm run electron:build

大概率会出现如下图的这种情况：

网络问题导致 winCodeSign-2.6.0.7z 下载不完整或损坏

7-Zip 解压权限 / 兼容性问题

缓存目录异常，文件被锁定或损坏

没有管理员权限，无法解压 / 执行相关工具

我们可以打开一下如下路径：

javascript 复制代码

C:\Users\你的用户名\AppData\Local\electron-builder\Cache\winCodeSign

这里可能有下载好的也可能有下载不完成的内容，这里根据刚刚的命令窗口可以看到下载的这个 winCodeSign 版本是2.6.0；

现在我们将这个文件夹解压一下；解压到这个为止我们新建一个文件夹并命名为

javascript 复制代码

winCodeSign-2.6.0

再重新测试一遍如下这个打包命令：

javascript 复制代码

npm run electron:build

如图我们就成功将其项目打包完成，打包完成的这个桌面程序安装包在 dist 的目录下；

安装包文件

生成的安装包文件在 dist 文件夹目录下，如下图：

可以打开 win-unpacked 文件夹就是 Electron 打包后生成的绿色免安装版的程序文件夹了，打开文件夹可以查看到：

这里我们并没有来去配置一下 icon 图标文件以及生成的安装包 HelloWord Setup 文件图标以及在各种尺寸下的 icon 现实，留在最后的补充说明内容当中了。

六、其他

通过以上简单的几个步骤我们就把项目打包成立一个桌面程序，当然了，我们这里并没有涉及很多内容。

预加载脚本 preload.js

electron 的预加载脚本，什么是预加载脚本，看一下官方解释（Electron 的主进程是一个拥有着完全操作系统访问权限的 Node.js 环境。除了 Electron 模块，你还可以访问 Node.js 内置模块，以及任何通过 npm 安装的包。另一方面，出于安全原因，渲染进程默认跑在网页页面上，而并非 Node.js里。）

预加载脚本并不是必须要写内容的，比如我们在项目内容创建并添加一个 preload.js 的预加载脚本文件，可以不用编写任何代码内容，electron 依然能正常运行 Vue项目，那么什么时候不能或什么时候需要编写呢？就是Vue页面的内容需要调用系统级功能，就必须用预加载脚本了。如：

读取本地文件，写入文件；
调用系统对话框 - 选择或保持文件；
操作窗口 ... 等等

如果项目内容就是纯网页内容展示，不调用任何系统功能的话预加载脚本完全可以空着。

举个例子

以 Vue 项目举个简单例子:

如果我想拿到 Electron 的版本号，那么并不能够直接来去拿到，但是可以通过预加载脚本来去将版本号暴露给到 Vue 然后让我们去获取。

preload.js

javascript 复制代码

// preload.js 安全暴露方法给 Vue
const { contextBridge, ipcRenderer } = require('electron')

// 把版本号暴露给 Vue
contextBridge.exposeInMainWorld('electron', {
  getVersions: () => process.versions
})

vue 文件

javascript 复制代码

<script setup>
const showVersion = () => {
  // 直接用预加载脚本暴露的方法
  const versions = window.electron.getVersions()
  alert(versions.electron)
}

electron 就是开一个安全小窗口出来开放明确允许的功能，不直接接触 Node.js 底层，有安全规范，就像一道安全桥梁；如果你的项目内容当中需要调用到系统功能的，那么就需要在这个 proload.js 的预加载脚本当中来去暴露接口让你项目去使用，如果像纯前端页面的话那么可以忽略。

如何来去使用预加载脚本的，感兴趣的可以到官网再继续深入学习：

附：使用预加载脚本 | Electron 官网

当然还有像发布更新程序以及签名等这些内容，这里我们仅仅只是体验了 Electron 的一个打包程序体验罢了，并没有过多深入关于 Electron 框架的应用，如果对此感兴趣的朋友可以到官网或者网上找资料继续深入学习，本篇内容就到这里，下面就是补充内容了。

七、补充内容

离线安装

使用如下命令下载 winCodeSign-2.6.0 压缩包；

javascript 复制代码

https://npmmirror.com/mirrors/electron-builder-binaries/winCodeSign-2.6.0/winCodeSign-2.6.0.7z

在如下路径创建文件夹 winCodeSign-2.6.0 并将下载的内容解压拷贝进去：

javascript 复制代码

C:\Users\你的用户名\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.6.0

完成之后再使用打包命令就可以完成桌面程序应用的打包了。

补充：

winCodeSign / Git Hub 官网地址

javascript 复制代码

https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z

icon 图标配置

打包程序中程序边框图标以及安装包等图标适配；

在 package.json 文件中，在 build 打包字段中 win 的 icon 项：

这里我们表示的时将图标放在根目录下，如果你放在其他地方，需要在这里确保图标访问路径的正确。

窗口图标

窗口图标就是我们使用 electron 创建弹窗，在弹窗的左上角会有一个图标的显示：

需要在 main.js 文件中来去配置，在 main.js 文件中添加如下代码：

javascript 复制代码

const path = require('node:path')

...
icon: path.join(__dirname, 'icons.ico'),
...

完整代码参考：

javascript 复制代码

const { app, BrowserWindow } = require('electron')
const path = require('node:path')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
	icon: path.join(__dirname, 'icons.ico'),
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('./dist/index.html')
}

app.whenReady().then(() => {
  createWindow()
})

当前我们还没有这个 ico 文件，需要我们来去制作一个命名为 icons 的 ico 图标文件，这里先演示一下效果：

转换图标

首先我们需要准备一个图标，作者这里用的是一个自制的Logo，是PNG文件，下面我们将其转换为一个 ico 图标文件供我们使用；

打开 AConvert 官网，点击【选择文件】，选择【icons.png】文件进行转换；

* png 文件建议选用【800 x 800】像素；

转换完成之后就可以点击下载下来，然后将文件名称改为【icons】即可

配置完icon后再切出命令窗口输入打包工具命令再次打包即可，随后打包生成的安装包程序就会贴换成配置的 icon 使用，右键查看各种尺寸都是能够正常显示图标的。

移除顶部状态栏

如果并不需要 Electron 提供的顶部状态栏的话，我们可以将其移除掉，适合只需要纯前端页面展示的项目。

修改 main.js

移除顶部状态栏需要在 main.js 文件中来去添加如下代码：

javascript 复制代码

const { Menu } = require('electron')

...

// 将应用程序菜单设置为null以移除菜单栏
Menu.setApplicationMenu(null)

...

完整代码参考：

javascript 复制代码

const { app, BrowserWindow,Menu } = require('electron')
const path = require('node:path')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
	icon: path.join(__dirname, 'LOGO.ico'),
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('./dist/index.html')
  
  // 将应用程序菜单设置为null以移除菜单栏
  Menu.setApplicationMenu(null)
}

app.whenReady().then(() => {
  createWindow()
})

完成之后，需要重新打包项目，效果如下：

好了本期的内容就到这里，关于 Electron 的内容后续有的话我们再继续编写关于 electron 的相关内容，快来体验制作你的第一个桌面应用程序吧！！！

使用 Electron 打包项目构建 .EXE 桌面应用程序（简）

一、 准备工作

二、打包项目（dist）

三、安装 Electron

3.1 初始化项目

3.2 安装 Electron / Electron:builder

3.3 添加 package.json 脚本命令

四、配置

4.1 拷贝项目 dist

4.2 main.js 文件

4.3 build 打包配置

下载镜像配置

4.4 package.json 参考

五、打包

安装包文件

六、其他

预加载脚本 preload.js

举个例子

七、补充内容

离线安装

icon 图标配置

窗口图标

转换图标

移除顶部状态栏

修改 main.js

一、准备工作