【electron 4】electron配置打包环境

首先要准备应用图标

window需要：ico
mac需要：icns
linux需要png
借助：electron-icon-builder

安装：

npm i electron-icon-builder -D
1

配置package.json scripts

"build-icon": "electron-icon-builder --input=./electron/assets/icon.png --output=./electron/build --flatten"
1

说明：
input：icon.png是我需要引入的图标
output：是我将input引入图标所转换不同大小不同格式的图标输出文件

配置打包：electron-forge

因为我是已有的项目了，所以这里我只需要安装并引入electron-forge，虽然我进行配置了项目，但是我为了图省事用了electron框架，所以我必须用electron-builder进行配置打包了，所以这里针对electron-forge的笔记可能会比较浅薄。

npm install --save-dev @electron-forge/cli
npm exec --package=@electron-forge/cli -c "electron-forge import"
1
2

因为配置时没考虑到maker，所以很容易忽略这段安装：

npm install --save-dev @electron-forge/cli @electron-forge/maker-squirrel @electron-forge/maker-deb @electron-forge/maker-zip
1

package.json示例：

devDependencies: {
    "@electron-forge/cli": "^7.4.0",
    "@electron-forge/maker-deb": "^7.4.0",
    "@electron-forge/maker-dmg": "^7.4.0",
    "@electron-forge/maker-rpm": "^7.4.0",
    "@electron-forge/maker-squirrel": "^7.4.0",
    "@electron-forge/maker-zip": "^7.4.0",
    "@electron-forge/plugin-auto-unpack-natives": "^7.4.0",
    "@electron-forge/plugin-fuses": "^7.4.0",
}

scripts: {
    "build:os": "electron-forge package",
    "build:maker": "electron-forge make",
}

config: {
    "forge": "./config.forge.js"
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

config.forge.js配置

module.exports = {
  "packagerConfig": {
    version: '0.0.1',
    appVersion: '0.0.1',
    name: 'electron-umi',
    productName: 'viefong',
    icon: 'electron/build/icons',
    out: './release/',
    overwrite: true,
    asar: true,
    "copyright": "Copyright © 2024",
    // "ignore": [ // 不需要打包的文件和文件夹的路径列表
    //   ".git",
    //   ".vscode",
    //   "node_modules/.cache",
    //   "src"
    // ],
    descriptions: '微鳯即时通讯工具',
    // 配置其他构建器（特殊情况下使用）
    "win": { // Windows平台的配置
      "target": "nsis", // 打包的目标格式为NSIS安装程序
      "icon": "./electron/build/icons/icon.ico", // Windows平台的图标路径
      "publisherName": "electron-umi开发者团队", // 发布者名称
      "fileAssociations": [ // 关联文件类型的配置
        {
          "ext": "myext", // 文件扩展名
          "name": "electron-umi", // 文件类型名称
          "description": "electron-umi即时通讯工具", // 文件类型描述
          "role": "Editor" // 文件类型的角色
        }
      ],
      "certificateFile": "path/to/certificate.pfx", // 数字证书文件的路径
      "certificatePassword": "password123" // 数字证书的密码
    },
    "mac": { // macOS平台的配置
      "target": "dmg", // 打包的目标格式为DMG镜像
      "icon": "./electron/build/icons/icon.icns", // macOS平台的图标路径
      "category": "public.app-category.utilities", // 应用程序的分类
      "extendInfo": { // 扩展应用程序包的配置
        "NSAppTransportSecurity": {
          "NSAllowsArbitraryLoads": true // 允许应用程序加载任意的网络资源
        }
      }
    },
    "linux": { // Linux平台的配置
      "target": "deb", // 打包的目标格式为DEB包
      "icon": "./electron/build/icons/icon.png", // Linux平台的图标路径
      "category": "Utility", // 应用程序的分类
      "description": "electron-umi即时通讯工具", // 应用程序的描述
      "desktop": { // 创建桌面快捷方式的配置
        "Name": "electron-umi", // 快捷方式的名称
        "Comment": "electron-umi", // 快捷方式的注释
        "Exec": "./viefong", // 快捷方式的执行命令
        "Terminal": false // 是否在终端中打开应用程序
      }
    }
  },
  "makers": [
    {
      "name": "@electron-forge/maker-squirrel",
      "config": {
        "name": "electron_quick_start",
        "setupIcon": "./electron/build/icons/icon.ico"
      }
    },
    {
      "name": '@electron-forge/maker-dmg',
      "config": {
        "format": 'ULFO',
        icon: './electron/build/icons/icon.icns'
      }
    },
    {
      "name": "@electron-forge/maker-deb",
      "config": {
        options: {
          icon: './electron/build/icons/icon.icns'
        }
      }
    },
    {
      "name": "@electron-forge/maker-rpm",
      "config": {}
    }
  ],
  "hook": {}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

配置打包：electron-builder

安装：

yarn add electron-builder --dev
1

配置，在package.json中直接复制进去即可：

"build": {
    "appId": "com.electron.app",
    "files": [
      "dist",
      "node_modules",
      "package.json"
    ],
    "nsis": {
      "artifactName": "electron-umi",
      "oneClick": false,
      "perMachine": true,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./electron/build/icons/icon.ico",
      "uninstallerIcon": "./electron/build/icons/icon.ico",
      "installerHeaderIcon": "./electron/build/icons/icon.ico",
      "installerSidebar": "./electron/build/icons/sidebar-164x314.bmp",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "include": "./electron/build/installer.nsh"
    },
    "asar": true,
    "asarUnpack": "**\\*.{node,dll}",
    "afterSign": "electron/.erb/scripts/notarize.js",
    "mac": {
      "target": {
        "target": "default",
        "arch": [
          "arm64",
          "x64"
        ]
      },
      "type": "distribution",
      "hardenedRuntime": true,
      "entitlements": "electron/assets/entitlements.mac.plist",
      "entitlementsInherit": "electron/assets/entitlements.mac.plist",
      "gatekeeperAssess": false,
      "icon": "electron/build/icons/icon.icns"
    },
    "dmg": {
      "icon": "electron/build/icons/icon.icns",
      "contents": [
        {
          "x": 130,
          "y": 220
        },
        {
          "x": 410,
          "y": 220,
          "type": "link",
          "path": "/Applications"
        }
      ]
    },
    // 自动更新
    "publish": {
      "provider": "github",
      "owner": "electron-umi",
      "repo": "electron-umi"
    },
    "directories": {
      "app": "release/app",
      "buildResources": "assets",
      "output": "release/build"
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

注：因为我项目中用的是umi脚手架搭建的react，打包后，是空白页面，所以要在.umirc.ts中配置一下即可

history: {
    type: 'hash',
}
1
2
3