Electron项目打包

Posted 2021-06-09 aiguangyuan

1. Electron-Packager模块打包

1. 安装模块  

npm install electron-packager --save-dev 

2. 配置打包命令

electron-packager <sourcedir> <appname> <platform> <architecture> <electron version> <optional options>

参数说明： 

sourcedir：项目所在路径

appname：应用名称

platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）

architecture：决定了使用 x86 还是 x64 还是两个架构都用

electron version：electron 的版本

optional options：可选选项

为了方便起见，可以在package.json中添加代码：

"scripts": {
    "package": "electron-packager ./ myapp --out ./OutApp --version 1.7.9 --overwrite --icon=./app/img/icon/icon.ico"
 }

3. 执行打包命令

npm run package

 

2. Electron-Builder模块打包

1. 安装模块

npm add electron-builder --save-dev

2. 配置打包命令

// package.json

"build": {
    "appId": "com.xxx.app",
    "mac": {
      "target": ["dmg","zip"]
    },
    "win": {
      "target": ["nsis","zip"]
    }
},
"scripts": {
    "dist": "electron-builder --win --x64"
},

3. 执行打包命令

npm run dist

 

3. Electron-Forge脚手架打包

1. 配置打包环境

// package.json
{
  "name": "lapp",
  "productName": "打包成安装包时不能是中文",// 包名
  "version": "1.0.1", // 版本号
  "description": "....", // 描述
  "main": "src/index.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "eslint src --color"
  },
  "keywords": [],
  "author": "lrj",
  "license": "MIT",
  "config": {
    "forge": {
      "make_targets": {
        "win32": [ // Window平台
          "squirrel"
        ],
        "darwin": [ // Mac平台
          "zip" 
        ],
        "linux": [ // Linux平台
          "deb",
          "rpm"
        ]
      },
      "electronPackagerConfig": {
        "packageManager": "npm",
        "icon": "src/images/icon/app_logo", //应用图标
        "asar": true, //加密
        "overwrite": true //覆盖打包
      },
      "electronWinstallerConfig": {
        "packageName": "打包成安装包时不能是中文",
        "name": "lapp"
      },
      "electronInstallerDebian": {
        "packageName": "打包成安装包时不能是中文",
        "name": "lapp"
      },
      "electronInstallerRedhat": {
        "packageName": "打包成安装包时不能是中文",
        "name": "lapp"
      },
      "github_repository": {
        "owner": "",
        "name": ""
      },
      "windowsStoreConfig": {
        "packageName": "打包成安装包时不能是中文",
        "name": "lapp"
      }
    }
  },
  "dependencies": {
    "address": "^1.1.2",
    "electron-compile": "^6.4.4",
    "electron-squirrel-startup": "^1.0.0",
    "md5": "^2.2.1",
    "express": "^4.17.1",
    "body-parser": "^1.19.0"
  },
  "devDependencies": {
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "body-parser": "^1.19.0",
    "electron-forge": "^5.2.4",
    "electron-prebuilt-compile": "4.0.0",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.17.0",
    "express": "^4.17.1",
    "md5": "^2.2.1",
    "address": "^1.1.2"
  }

2. 打包测试环境

electron-forge package

3. 打包正式环境

electron-forge make

 

4. Electron-Vue脚手架打包

1. 配置打包环境

// package.json

"build": {
    "productName":"xxxx",//项目名 这也是生成的exe文件的前缀名
    "appId": "com.leon.xxxxx",//包名  
    "copyright":"xxxx",//版权  信息
    "directories": { // 输出文件夹
      "output": "build"
    }, 
    "nsis": {
      "oneClick": false, // 是否一键安装
      "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
      "allowToChangeInstallationDirectory": true, // 允许修改安装目录
      "installerIcon": "./build/icons/aaa.ico",// 安装图标
      "uninstallerIcon": "./build/icons/bbb.ico",//卸载图标
      "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
      "createDesktopShortcut": true, // 创建桌面图标
      "createStartMenuShortcut": true,// 创建开始菜单图标
      "shortcutName": "xxxx", // 图标名称
      "include": "build/script/installer.nsh", // 包含的自定义nsis脚本
    },
    "publish": [
      {
        "provider": "generic", // 服务器提供商 也可以是GitHub等等
        "url": "http://xxxxx/" // 服务器地址
      }
    ],
    "files": [
      "dist/electron/**/*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "win": {
      "icon": "build/icons/aims.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32"
          ]
        }
      ]
    },
    "linux": {
      "icon": "build/icons"
    }
  }

2. 执行打包命令

npm run build

3. 打包错误解决

(1). 托盘图标位置

把拖盘图标放在static文件夹下，创建拖盘图标合并地址时，将__dirname替换为__static.

var tray = new Tray(path.join(__static,'../static/favicon.ico'));

(2). 托盘图标格式修改

拖盘的图标格式有平台区分，但都支持png和jpg，请知悉。