react项目引入electron进行mac、windows桌面应用打包，通过浏览器下载安装包

打包步骤

1. 全局安装electron

npm install electron -g
1

2. 在react项目的根目录中，创建一个新的文件夹electron，用于存放electron相关的文件
3. 在该文件夹中，创建一个新的package.json文件，并添加以下内容：

{
  "name": "example", // 应用名称
  "version": "1.0.0", // 应用版本号
  "main": "main.js", // 主入口文件
  "scripts": {
    "start": "electron-forge start", // 启动应用的命令
    "dist:mac": "electron-builder build --m", // 打包mac应用程序的命令
    "dist:win": "electron-builder build --w " // 打包windows应用程序的命令
  },
  "author": "xxx", // 作者
  "license": "xxx-1.0", // 许可证
  "build": {
    "appId": "com.example.app", // 应用ID
    "productName": "example", // 应用名称
    "directories": {
      "output": "release-builds", // 打包输出目录
      "buildResources": "public" // 构建资源目录
    },
    "afterSign": "afterSign.js", // 签名后执行的脚本
    "nsis": { // NSIS安装程序配置
      "installerIcon": "./public/icons/favicon.ico", // 安装程序图标
      "uninstallerIcon": "./public/icons/favicon.ico", // 卸载程序图标
      "installerHeaderIcon": "./public/icons/favicon.ico", // 安装程序头部图标
      "oneClick": false, // 是否一键安装
      "language": "2052", // 安装程序语言
      "installerLanguages": [
        "zh-CN" // 安装程序支持的语言
      ],
      "perMachine": true, // 是否为每台机器安装
      "allowToChangeInstallationDirectory": true, // 允许更改安装目录
      "createDesktopShortcut": true, // 创建桌面快捷方式
      "createStartMenuShortcut": true, // 创建开始菜单快捷方式
      "shortcutName": "阿拉丁AI" // 快捷方式名称
    },
    "files": [
      "**/*",
      "!node_modules/electron-*",
      "!node_modules/electron-builder",
      "!node_modules/electron-prebuilt-compile",
      "!node_modules/electron-edge-js/**/*"
    ], // 打包时需要包含的文件和排除的文件
    "dmg": { // DMG安装包配置
      "iconSize": 100, // 图标尺寸
      "contents": [
        {
          "x": 380,
          "y": 180,
          "type": "link",
          "path": "/Applications" // 链接到Applications目录
        },
        {
          "x": 130,
          "y": 180,
          "type": "file" // 文件
        }
      ],
      "window": {
        "x": 100,
        "y": 100,
        "width": 500,
        "height": 300 // DMG窗口尺寸
      }
    },
    "mac": {
	  "category": "public.app-category.utilities", // 应用程序所属的类别
	  "target": [
	    {
	      "target": "dmg", // 目标为生成dmg安装包
	      "arch": [
	        "arm64", // 支持arm64架构
	        "x64" // 支持x64架构
	      ]
	    },
	    "zip" // 目标为生成zip压缩包
	  ],
	  "icon": "./public/icons/favicon.icns", // 应用程序的图标路径
	  "notarize": {
	    "teamId": "xxxxxx" // 用于应用程序的代码签名的团队ID
	  }
	},
	"win": {
	  "target": [
	    {
	      "target": "nsis", // 目标为生成NSIS安装包
	      "arch": [
	        "ia32", // 支持ia32架构
	        "x64" // 支持x64架构
	      ]
	    },
	    "zip" // 目标为生成zip压缩包
	  ],
	  "icon": "./public/icons/favicon.ico" // 应用程序的图标路径
	}
   },
   "devDependencies": {
    "@electron-forge/cli": "^7.3.0",
    "@electron-forge/maker-deb": "^7.3.0",
    "@electron-forge/maker-rpm": "^7.3.0",
    "@electron-forge/maker-squirrel": "^7.3.0",
    "@electron-forge/maker-zip": "^7.3.0",
    "@electron-forge/plugin-auto-unpack-natives": "^7.3.0",
    "@electron-forge/plugin-fuses": "^7.3.0",
    "electron": "^28.2.1",
    "electron-builder": "^24.12.0"
  },
  "dependencies": {
    "electron-log": "^5.1.1",
    "electron-notarize": "^1.2.2",
    "electron-squirrel-startup": "^1.0.0"
  }
}

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

4. 在同一文件夹中，创建一个新的main.js文件，并添加以下内容：

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

function createWindow () {
  const win = new BrowserWindow({
    width: 1280,
    height: 800,
    webPreferences: {
      devTools: true, //是否开启 DevTools
      nodeIntegration: true
    }
  })

  win.loadURL('http://localhost:3000') // 请替换为你的react项目的URL
  // 隐藏客户端默认菜单
  Menu.setApplicationMenu(null);
  // 解决应用启动白屏问题
  win.on("ready-to-show", () => {
    win.show();
    win.focus();
  });
  // 打开开发者工具
  // win.webContents.openDevTools()
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

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

5. 在终端中，进入到该文件夹，并运行以下命令来安装依赖：

npm install
1

6. 接下来，运行以下命令来启动Electron应用程序：

npm run start
1

7. 进行mac签名公证
   参考 MacOS的 打包、签名、公证、上架 和 electron mac 打包、分发流程（dmg & mas）
8. 在同一文件夹中，创建一个新的afterSign.js文件，并添加以下内容：

const { notarize } = require('electron-notarize');
const path = require("path")
exports.default = async function notarizing(context) {
    const { electronPlatformName, appOutDir } = context;
    if (electronPlatformName !== 'darwin') {
        return;
    }
    const appName = context.packager.appInfo.productFilename;
    const appPath = path.join(appOutDir, `${appName}.app`);
    return await notarize({
        appBundleId: ‘apple开发者中该应用的bundleid',
        appPath,//打包后的放置app文件的命名和路径
        appleId: “开发者账号",
        appleIdPassword: "app专属密码”,//在apple开发者里可以对某个app设置专属密码
    });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

9. 打包

npm run dist:mac
npm run dist:win
1
2

10、生成下载链接

把dmg包和exe包上传到阿里云oss，访问链接即可下载

其他问题

1、electron mac端打包需要依赖python2.7，如果报错，下载安装一下python2.7

2、遇到mac打包报错：macxcrun: error: invalid active developer path

这个错误通常是由于缺少Xcode命令行工具导致的。你可以尝试以下解决方法：

确保你已经安装了Xcode。你可以在终端中运行以下命令来检查：

xcode-select -p
1

如果返回了Xcode的路径，那么Xcode已经安装。如果没有返回任何内容，那么你需要安装Xcode。

安装Xcode命令行工具。在终端中运行以下命令：

xcode-select --install
1

这将打开一个对话框，提示你安装Xcode命令行工具。按照提示进行安装。

确保你已经接受了Xcode的许可协议。在终端中运行以下命令：

sudo xcodebuild -license accept
1

按照提示接受许可协议。

重新运行打包命令

3、点击dmg安装包下载链接后，浏览器提示“已阻止不安全的下载”，安装软件时提示已损坏

由于浏览器对于某些文件类型或来源的下载进行了安全限制。对于 Electron 打包的 dmg 文件，有时候浏览器会将其标记为不安全的下载。

测试阶段可以去系统设置->隐私与安全性->安全性下面选择允许任何来源（如果没有该选项可以在终端中执行 sudo spctl --master-disable ）来解决此问题，正式包分发去往打包步骤7。