安装程序

基础知识

向军大叔每晚八点在抖音和 bilibli 直播

使用 electron forge 或 electron-builder 都可以打包electron应用。

如果使用脚手架时，一般脚手架已经做好了打包配置，下面是介绍使用 [electron-vite](https://cn-evite.netlify.app/guide/#��% AD%E5%BB%BA%E7%AC%AC%E4%B8%80%E4%B8%AA-electron-vite-%E9%A1%B9%E7%9B%AE) 脚手架开发的 electron 完成打包操作，他在内部使用 electron-builder 扩展进行打包操作。

镜像加速

在编译打包过程中 electron-build 需要下载依赖，所以设置国内镜像可以保证下载成功，请访问 Electron第一章了解镜像配置方法。

配置解释

[electron-vite](https://cn-evite.netlify.app/guide/#��% AD%E5%BB%BA%E7%AC%AC%E4%B8%80%E4%B8%AA-electron-vite-%E9%A1%B9%E7%9B%AE) 脚手架使用 electron-builder 对项目进行打包，electron-builder.yml 是打包的配置文件。

下面对常用配置项说明

productName 为软件的名称，配置文件中可以使用${productName} 读取
executableName 指 window打包后dist/win-unpacked 目录中的执行程序名称

变量

${productName} 指electron-builder.yml配置文件中的productName值
${name} 指package.json 中的 name 值
${version} 指 package.json 中的 version 值

directories

打包图标等文件定义

buildResources 图标文件存放目录
output 指定打包文件输出目录

asarUnpack

asar 是一种将多个文件合并成一个文件的类 tar 风格的归档格式。 Electron 可以无需解压整个文件，即可从其中读取任意文件内容。可加快 require 速度，由于文件整合到一个 asar 文件，所以安装也会变快。

该配置项用于设置哪些文件从 asar 中解压缩。

files

相对于应用目录的 glob 模式，它指定在复制文件以创建包时要包含的文件。

nsis

NSIS (Nullsoft Scriptable Install System) 是一个专业开源的制作 windows 安装程序的工具，下面对属性做个说明

artifactName 设置window 安装程序的名称
shortcutName 桌面快捷方式的名称
uninstallDisplayName 设置 window 卸载程序时显示的名称，如在腾讯电脑管家中卸载时显示的名称
createDesktopShortcut 是否创建桌面快捷方式

dmg

配置项中的 dmg 是苹果系统的安装配置

artifactName 安装程序的名称

package.json

name window 应用安装名称，不能是中文
author 显示应用程序的作者和版权信息中显示（右键查看应用程序属性）

ElectronForge

如果你使用 electron-forge 进行打包，下面讲解操作说明。不过绝大多数 electron 脚手架内部都使用 electron-build 进行打包，所以上面讲解的 electron-build 还是常用方法。

请在项目根目录执行以下命令安装打包软件

pnpm add -D @electron-forge/cli 

npx electron-forge import

系统会生成 forge.config.js 文件包含不同平台的打包配置。

然后执行下面命令即可生成应用程序

pnpm run make

然后修改 forge.config.js 文件，定义图标文件（注意不用写扩展名）

module.exports = {
  packagerConfig: {
      icon: 'icon',
  },
  ...
}

然后修改 main.js 主进程文件，设置图标

const win = new BrowserWindow({
      height: 800,
      width: 1600,
      show: false,
      webPreferences: {
          preload: path.join(__dirname, 'preload.js'),
      },
      icon: 'icon.png', //设置图标，需要png扩展名
  })

这时打包应用就可以得到拥有图标的应用程序，并且在 dock 栏也可以看到图标了。

安装程序 ​

基础知识 ​

镜像加速 ​

配置解释 ​

变量 ​

directories ​

asarUnpack ​

files ​

nsis ​

dmg ​

package.json ​

ElectronForge ​