Electron 热更新和electron-builder 打包

福尔摩斯对我笑 2019-05-11 83 次 0条

注意:这篇博文,杂乱无章,仅供非强迫症患者参考,可直接https://github.com/SeekHappy/electron_builder.git下载demo来测试

 

555飞思达

  • 需安装electron-prebuilt才能直接使用electron . 来启动
  • Electron 发生错误 "Cannot find module app
  • 使用electron,为避免出现各位因网络造成的问题,请做以下设置
npm config set registry https://registry.npm.taobao.org/ 
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

修改成这样
const electron = require('electron'); 
const app = electron.app; 
const BrowserWindow = electron.BrowserWindow;
  • electron-builder 打包

配置参数:https://www.electron.build/configuration/configuration


"scripts": {
"pack": "electron-builder --dir",  //以可分发的格式打包的应用程序,一般用于测试
"dist": "electron-builder"
},



"build": {
    "productName":"xxxx",//项目名 这也是生成的exe文件的前缀名
    "appId": "com.leon.xxxxx",//包名  
    "copyright":"xxxx",//版权  信息
    "directories": { // 输出文件夹
      "output": "build",
      "app" :  //应用程序目录(包含应用程序的package.json),默认为app,www或工作目录。
    }, 
    "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/**/*"    //工作目录,必须包含main.js
    ],
    "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": [
        "x64",
        "ia32"
        ]
        },
        {
        "target": "zip",
        "arch": [
        "x64",
        "ia32"
        ]
        }
        ]


    },
    "linux": {
      "icon": "build/icons"
    }
  }

注意事项

  • 注意查看报错信息
  • ico必须大于256x256像素,否则打包会报错。
  • 因为electron-builder会自动将electron打到包里,所以应该将package.json中的”electron”: “^3.0.10”从dependencies中转移到devDependencies中,否则会提示错误:
  • 打包后若是出现require不能使用的错误,解决方法

mainWindow = new BrowserWindow({width: 800, height: 600, webPreferences: {
nodeIntegration: true
}});


  • 更新时出现this.app.whenReady is not a function的错误,解决方法,手动安装4.0.0版本的模块,不知道为啥没有按照package.json文件中写的版本去加载
  • 若是在更新时,出错提示缺少这个dev-app-update.yml这个文件,那你应该是通过直接打开文件来执行的,并没有安装版本。

只是想用来测试,那就使用下面的解决方法:

请注意,为了在不打包应用程序的情况下开发/测试更新的UI / UX,您需要在项目的根目录中创建名为dev-app-update.yml的文件,该文件与电子构建器配置中的发布设置相匹配(但是以yaml格式)。但不建议,最好测试已安装应用程序的自动更新(特别是在Windows上)。建议将Minio用作测试更新的本地服务器。

标签:

非特殊说明,本博所有文章均为博主原创。

头像也是LOGO
未来博客 博主大人
到了这个年纪,不应该再彷徨!

发表评论



 


暂无评论