当前位置:   article > 正文

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

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

打包步骤

  1. 全局安装electron
npm install electron -g
  • 1
  1. 在react项目的根目录中,创建一个新的文件夹electron,用于存放electron相关的文件
  2. 在该文件夹中,创建一个新的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
  1. 在同一文件夹中,创建一个新的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
  1. 在终端中,进入到该文件夹,并运行以下命令来安装依赖:
npm install
  • 1
  1. 接下来,运行以下命令来启动Electron应用程序:
npm run start
  • 1
  1. 进行mac签名公证
    参考 MacOS的 打包、签名、公证、上架electron mac 打包、分发流程(dmg & mas)
  2. 在同一文件夹中,创建一个新的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
  1. 打包
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。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/151954?site
推荐阅读
相关标签
  

闽ICP备14008679号