使用electron-builder对Electron项目进行打包

        1、首先我们需要先安装electron-builder打包工具

        以管理员身份运行CMD,然后输入命令cnpm install electron-builder -g即可安装。输入electron-builder -v查看是否安装成功,如下图所示为已安装好了的效果:

        2、使用命令进行打包

        第一次打包,需要下载以下文件(如果使用命令自己下载,可能会很慢,你懂得,所以你可以提前手动下载好这些文件,并将其提前放至到对应的文件夹中去,最后才去执行打包命令):
            winCodeSign:https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.5.0/winCodeSign-2.5.0.7z
            nsis:https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z
            nsis-resources:https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z
            可手动将其先下载下来,然后将其文件分别解压到如下目录:
                winCodeSign:C:\Users\quber\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.5.0
                nsis:C:\Users\quber\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1
                nsis-resources:C:\Users\quber\AppData\Local\electron-builder\Cache\nsis\nsis-resources-3.4.1

        以管理员身份运行CMD,然后定位到项目文件夹,输入如下命令:
        cnpm run build

        注意,在运行上述命令前,需要在项目中的package.json中设置build属性节点配置,具体配置请查看如下package.json代码。
        其中cnpm run build中的build为package.json中scripts属性下的build属性名称,具体请查看如下package.json代码。

{
  "name": "el_test2",
  "version": "1.0.1",
  "description": "Electron测试的第二个项目",
  "main": "./app/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"electron-builder --win --x64"
  },
  "keywords": [
    "quber"
  ],
  "author": "Quber",
  "license": "ISC",
  "build": {
    "productName":"el_test2",
    "appId": "quber.el_test2",
    "copyright":"Quber©20200220",
    "directories": {
      "output": "app_file"
    }, 
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./app/images/256x256.ico",
      "uninstallerIcon": "./app/images/256x256.ico",
      "installerHeaderIcon": "./app/images/256x256.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "el_test_shortcut"
    },
    "win": {
      "icon": "app/images/256x256.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32"
          ]
        }
      ]
    }
  }
}

        关于build属性说明如下:

      更多说明可参考官网:https://www.electron.build/configuration/configuration


        打包执行命令效果如下:

        3、打包成品

        我们可以看到,在项目文件夹中的app_file文件夹中,有el_test Setup 1.0.0.exe文件和win-unpacked文件夹。其中的el_test Setup 1.0.0.exe为安装包,win-unpacked为非安装包,可直接点击里面的可执行文件运行,如下图所示:

扫描二维码关注公众号,回复: 9753904 查看本文章
发布了293 篇原创文章 · 获赞 31 · 访问量 9万+

猜你喜欢

转载自blog.csdn.net/qubernet/article/details/104409672