electron-builder配合electron-updater。windows下的打包与升级

打包的时候我遇到了一个问题 有人知道可以留言告诉我

  • 我的渲染进程 文件都放到一个文件夹里怎么打包
  • 现在我都是把所有的文件放到根目录下的
  • 用angular 项目一般都是编译到dist目录中electron打包时会把源码也打包去怎么配置指定编译目录下的文件,这样我就不用另外开一个electron项目了
  1. 创建electron 项目 略
  2. 添加 electron-builder 和 electron-updater。
npm install  electron-builder --save-dev
npm install  electron-updater --save
  1. package.json文件中配置 electron-builder 和 electron-updater 参数(复制使用需要自行删除注释)
  • https://www.electron.build/configuration/win
  • 详细的配置可以到官网查阅
  // 版本号 
  "version": "1.0.0",
  "build": {
    "appId": "con.electron.app",
    "productName": "electron",
    // 更新相关的配置
    "publish": [
      {
        "provider": "generic",
        // 更新检查地址,这里是我本地的测试地址 
        "url": "http://localhost:5500/up/"
      }
    ],
    // windows 打包相关配置
    "win": {
      "target": [
        "nsis"
      ]
    },
    // nsis 打包模式的相关配置
    "nsis": {
      "oneClick": false,
      "perMachine": true,
      "allowToChangeInstallationDirectory": true
    }
  },
  // 添加命令
  "scripts": {
    ...
    "dist": "electron-builder -w"
  },
  1. 打包
npm run dist
  • 默认打包自动生成dist目录
  • 第一次打包可能出项下载文件依赖文件的错误(不要方,注意看错误信息,重试一下)
  • electron-builder配合electron-updater。windows下的打包与升级_第1张图片
    打包完成
  • electron-builder配合electron-updater。windows下的打包与升级_第2张图片
    电脑中的文件
  1. 安装
  • 安装当然是选择 demo Setup 1.0.0.exe 安装过程就和一般软件一样啦!
  • electron-builder配合electron-updater。windows下的打包与升级_第3张图片
  • electron-builder配合electron-updater。windows下的打包与升级_第4张图片
    安装完成
  • electron-builder配合electron-updater。windows下的打包与升级_第5张图片
    运行效果
  • 因为我在使用ng-alain 所以直接用做测试了
  • 到这打包就完成了
  1. 升级
  • main.js 中编写更新检查
// 注意这个autoUpdater不是electron中的autoUpdater
const { autoUpdater } = require("electron-updater")

// 主进程监听渲染进程传来的信息(这里我是手动检查更新,可以在 electron的 ready 事件完成后触发)
// 会重复触发(这里我暂时不做这些逻辑了)
ipcMain.on('update', (e, arg) => {
  console.log("update");
  updateHandle();
});

// 检测更新,在你想要检查更新的时候执行,renderer事件触发后的操作自行编写
function updateHandle() {
  let message = {
    error: '检查更新出错',
    checking: '正在检查更新……',
    updateAva: '检测到新版本,正在下载……',
    updateNotAva: '现在使用的就是最新版本,不用更新',
  };
  const os = require('os');
  // 这里的URL就是更新服务器的放置文件的地址
  autoUpdater.setFeedURL('http://localhost:5500/up/');
  autoUpdater.on('error', function (error) {
    sendUpdateMessage(message.error)
  });
  autoUpdater.on('checking-for-update', function () {
    sendUpdateMessage(message.checking)
  });
  autoUpdater.on('update-available', function (info) {
    sendUpdateMessage(message.updateAva)
  });
  autoUpdater.on('update-not-available', function (info) {
    sendUpdateMessage(message.updateNotAva)
  });

  // 更新下载进度事件
  autoUpdater.on('download-progress', (progressObj) => {
    win.webContents.send('downloadProgress', progressObj)
  })
  // 下载完成事件
  autoUpdater.on('update-downloaded',  (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) => {
    ipcMain.on('isUpdateNow', (e, arg) => {
      // 关闭程序安装新的软件
      autoUpdater.quitAndInstall();
    })
    // 通知渲染进程现在完成
    win.webContents.send('isUpdateNow')
  });

  //执行自动更新检查
  autoUpdater.checkForUpdates();
}

// 通过main进程发送事件给renderer进程,提示更新信息
// win = new BrowserWindow()
function sendUpdateMessage(text) {
  win.webContents.send('message', text)
}
  • 渲染进程的 触发和监听代码
// angular 的组件初始化事件
ngOnInit() {
    this._e.ipcRenderer.on('message', (event, message) => {
      alert(message);
    });
    this._e.ipcRenderer.on('isUpdateNow', (event, message) => {
      this.s1 = '下载完成';
      alert('下载完成');
      this._e.ipcRenderer.send('isUpdateNow');
    });
    this._e.ipcRenderer.on('downloadProgress', (event, message) => {
      this.s2 = message;
    });
  }
  // 按钮事件
  upData() {
    this._e.ipcRenderer.send('update');
  }
  1. 更新打包
  • 打包方式一样(打包时最好删除一下原来的dist目录)
  • 把打包好的文件放到服务器中 (我直接放置了这个4个文件)(latest.yml,demo Setup 1.0.0.exe)好像只需要这两个(我懒得测试了就一起复制了)
  • image.png

以上都时参考: https://segmentfault.com/a/1190000010271226

  1. 如果你也使用windows 那么你也可以使用 iis创建测试服务器
  • iis的安装 略过
  • 我遇到了问题说一下


    electron-builder配合electron-updater。windows下的打包与升级_第6张图片

    electron-builder配合electron-updater。windows下的打包与升级_第7张图片

    electron-builder配合electron-updater。windows下的打包与升级_第8张图片

祝你好运!!

源码就不发了。如果有不明白的可以留言交流。

你可能感兴趣的:(electron-builder配合electron-updater。windows下的打包与升级)