electron使用electron-builder打包教程

1.配置npm和electron国内镜像

在项目根目录下新建一个.npmrc文件，添加如下内容：

registry=https://registry.npmmirror.com/
disturl=https://registry.npmmirror.com/-/binary/node
electron_mirror=https://npmmirror.com/mirrors/electron/
electron-builder-binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/

2.安装electron-builder(没有安装yarn的可以先运行：npm install -g yarn 安装一下)

yarn add electron-builder --dev  //或者：npm install electron-builder --save-dev

3.配置打包命令

在项目根目录下的package.json文件的scripts选项中添加下面这两行

"scripts": {
  "app:dir": "electron-builder --dir",
  "app:dist": "electron-builder"
}

4.打包
运行yarn app:dir生成包目录，该命令会在dist目录下生成一个win-unpacked目录

yarn app:dir  //或者：npm run app:dir

可以直接双击win-unpacked目录下的exe运行

运行yarn app:dist生成分发格式打包，该命令会生成一个Setup.exe安装文件，可以用于分发

yarn app:dist //或者：npm run app:dist

5.自定义打包配置

如果想自定义软件名称、图标、包名、版权等信息，可以在package.json中添加build相关配置：

"build": {
    "appId": "com.example.app",
    "productName":"test1",
    "copyright":"版权",
    "directories": {
      "output": "dist"
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./public/icon.ico",
      "uninstallerIcon": "./public/icon.ico",
      "installerHeaderIcon": "./public/icon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "快捷方式名称"
    },
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "./public/icon.icns"
    },
    "win": {
      "icon": "./public/icon.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64",
            "ia32"
          ]
        }
      ]
    },
    "linux": {
      "icon": "./public/icon.png"
    }
  }

下面是我完整的package.json文件，您可以参考一下

{
  "name": "test1",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "electron .",
    "app:dir": "electron-builder --dir",
    "app:dist": "electron-builder",
    "build:win": "electron-builder --win",
    "build:mac": "electron-builder --mac",
    "build:linux": "electron-builder --linux"
  },
  "author": "作者名称",
  "license": "ISC",
  "description": "软件描述",
  "devDependencies": {
    "electron": "^33.2.0",
    "electron-builder": "^25.1.8"
  },
  "build": {
    "productName":"test1",
    "copyright":"版权",
    "directories": {
      "output": "dist"
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./public/icon.ico",
      "uninstallerIcon": "./public/icon.ico",
      "installerHeaderIcon": "./public/icon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "图标名称"
    },
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "./public/icon.icns"
    },
    "win": {
      "icon": "./public/icon.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64",
            "ia32"
          ]
        }
      ]
    },
    "linux": {
      "icon": "./public/icon.png"
    }
  }
}

我还在scripts添加了几行命令，build:win、build:mac、build:linux，这样我可以对特定平台进行打包，如果我想打包windows版，就运行yarn build:win，如果我想打包mac版，就运行yarn build:mac，如果我想打包linux版，就运行yarn build:linux

如果您想查看还有什么打包命令，可以运行npx electron-builder --help查看帮助

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: