打包步骤
-
全局安装electron
npm install electron -g
-
在react项目的根目录中，创建一个新的文件夹electron，用于存放electron相关的文件
-
在该文件夹中，创建一个新的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"
}
} -
在同一文件夹中，创建一个新的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()
}
}) -
在终端中，进入到该文件夹，并运行以下命令来安装依赖：
npm install
-
接下来，运行以下命令来启动Electron应用程序：
npm run start
-
进行mac签名公证
参考 MacOS的 打包、签名、公证、上架 和 electron mac 打包、分发流程（dmg & mas） -
在同一文件夹中，创建一个新的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设置专属密码
});
}; -
打包
npm run dist:mac
npm run dist:win
10、生成下载链接
把dmg包和exe包上传到阿里云oss，访问链接即可下载
其他问题
1、electron mac端打包需要依赖python2.7，如果报错，下载安装一下python2.7
2、遇到mac打包报错：macxcrun: error: invalid active developer path
这个错误通常是由于缺少Xcode命令行工具导致的。你可以尝试以下解决方法：
确保你已经安装了Xcode。你可以在终端中运行以下命令来检查：
xcode-select -p
如果返回了Xcode的路径，那么Xcode已经安装。如果没有返回任何内容，那么你需要安装Xcode。
安装Xcode命令行工具。在终端中运行以下命令：
xcode-select --install
这将打开一个对话框，提示你安装Xcode命令行工具。按照提示进行安装。
确保你已经接受了Xcode的许可协议。在终端中运行以下命令：
sudo xcodebuild -license accept
按照提示接受许可协议。
重新运行打包命令
3、点击dmg安装包下载链接后，浏览器提示"已阻止不安全的下载"，安装软件时提示已损坏
由于浏览器对于某些文件类型或来源的下载进行了安全限制。对于 Electron 打包的 dmg 文件，有时候浏览器会将其标记为不安全的下载。
测试阶段可以去系统设置->隐私与安全性->安全性下面选择允许任何来源（如果没有该选项可以在终端中执行 sudo spctl --master-disable ）来解决此问题，正式包分发去往打包步骤7。