electron-builder打包配置 + electron-updater应用更新完整教程And踩坑总结

一.electron-builder

1.electron-builder安装及配置

安装命令：yarn add electron-builder --dev 或 npm install electron-builder --dev
(PS: 官方推荐使用yarn安装，说是能更好的处理依赖之间的关系)

安装好之后，配置package.json文件:

"build": {
    "appId": "com.xx.xx", // appid，‘com.xxx.xxx’格式
    "productName": "appname", // 应用的名称
    "directories": {
      "output": "dist" // 打包存在哪个文件夹，这么写的话打包好的exe就会生成在dist中
    },
    "publish": [ // 配合electron-updater来用
      {
        "provider": "generic", // 服务器供应商
        "url": "http://oss.poooli.com/download/app/desktop/" //服务器地址
      }
    ],
    "files": [
      "src/resources" // 在这里可以自定义打包文件
    ],
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "src/resources/icons/icon.ico",
      "uninstallerIcon": "src/resources/icons/icon.ico",
      "installerHeaderIcon": "src/resources/icons/icon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "name"
    },
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "src/resources/icons/icon.icns"
    },
    "win": {
      "icon": "src/resources/icons/icon.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32"
          ]
        }
      ]
    },
    "linux": {
      "icon": "src/resources/icons/icon.ico"
    }
  },

配置build之后就可以在"script"中自定义打包命令了：

"scripts": {
	"compile": "electron-webpack",
    "dist": "npm run compile && electron-builder",
    "dist:dir": "npm run dist --dir -c.compression=store -c.mac.identity=null"
 },

运行yarn dist或者npm run dist就可以打包文件啦，上面的配置，可以让我们在项目中的dist文件夹中找到我们打包好的exe文件，点击就可以安装啦

2.electron-builder打包时遇到的问题及解决

electron打包失败：  part download request failed with status code 403

在一切都配置完成之后，运行yarn dist还是遇到了问题。因为连接的是国外的网站，而第一次打包又要不断从github获取资源，导致连接超时。下面附上解决方案：

1、设置淘宝镜像
在C:\Users\Administrator找到.npmrc在里面加入以下两句代码：

registry=https://registry.npm.taobao.org/
ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron-builder-binaries/

再dist就不会有什么问题啦
2.下载地址：https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z
下载之后放到指定文件：C:\Users\Administrator\AppData\Local\electron\Cache。

打包成功。。。

点击exe文件一步一步安装又遇到

cannot find module 'source-map-support/source-map-support.js'

将source-map-support模块复制一份到dependencies重新打包

二. electron-updater

安装命令：yarn add electron-updater --save
注意：安装之后的updater一定是要在"dependencies"里的，不然不起作用

主进程更新应用代码如下（注意一定是要在main.js文件或者是在main文件夹下的index.js文件下的）

const isDevelopment = process.env.NODE_ENV !== 'production';

app.on('ready', () => {
  mainWindow = createMainWindow();
  if (!isDevelopment) updateHandle()
})

function updateHandle() {
  let message = {
    error: '检查更新出错',
    checking: '正在检查更新……',
    updateAva: '检测到新版本，正在下载……',
    updateNotAva: '已经是最新版本，不用更新',
  };
  const feedUrl = 'http://oss.poooli.com/download/app/desktop/' + process.platform;
  // 设置上传的服务器地址
  autoUpdater.setFeedURL(feedUrl);
  autoUpdater.on('error', function (error) {
    sendUpdateMessage(message.error, error)
  });
  // 在检查更新是否开始时发出。
  autoUpdater.on('checking-for-update', function () {
    sendUpdateMessage(message.checking, '')
  });
  /**
   * info UpdateInfo（适用于通用和github提供程序）| VersionInfo（用于Bintray提供程序）
   * 有可用更新时发出。如果autoDownload为，则会自动下载更新true。
   */
  autoUpdater.on('update-available', function (info) {
    sendUpdateMessage(message.updateAva, info)
  });
  // 没有可用更新时触发
  autoUpdater.on('update-not-available', function (info) {
    sendUpdateMessage(message.updateNotAva, info)
  });

  // 更新下载进度事件
  autoUpdater.on('download-progress', function (progressObj) {
    mainWindow.webContents.send('downloadProgress', progressObj)
  })
  // 开始下载
  autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
	
	 /**
	  * 和渲染进程通信，如果接收到"isUpdateNow"则调用autoUpdater.quitAndInstall();
	  * 退出应用程序并安装
	  */
    ipcMain.on('isUpdateNow', (e, arg) => {
      console.log(arguments);
      console.log("开始更新");
      //some code here to handle event
      autoUpdater.quitAndInstall();
    });

    mainWindow.webContents.send('isUpdateNow')
  });

  ipcMain.on("checkForUpdate", () => {
    //执行自动更新检查
    autoUpdater.checkForUpdates();
  })
}

// 通过main进程发送事件给renderer进程，提示更新信息
function sendUpdateMessage(text, info) {
  mainWindow.webContents.send('message', text, info)
}

渲染进程代码如下：

export default {
  name: "index",
  data() {
    return {};
  },
  mounted() {
    this.listenUpdate();
  },
  destroyed() {
    if (process.env.NODE_ENV === "production") {
      ipcRenderer.removeAll(["message", "downloadProgress", "isUpdateNow"]);
    }
  },
  methods: {
    listenUpdate() {
      ipcRenderer.send("checkForUpdate");
      ipcRenderer.on("message", (event, text, info) => {
        console.log("arguments====", arguments);
        console.log("event,text====", event, text, info);
      });
      ipcRenderer.on("downloadProgress", (event, progressObj) => {
        console.log("progressObj===", progressObj);
        this.downloadPercent = progressObj.percent || 0;
      });
      ipcRenderer.on("isUpdateNow", () => {
        // 下载完成之后提示用户更新程序
        let myNotification = new Notification("更新包下载完成", {
          body: "更新包下载完成，点击通知重启应用更新应用到最新版本！"
        });

        myNotification.onclick = () => {
          console.log("通知被点击");
          ipcRenderer.send("isUpdateNow");
        };
      });
    }
  }
}

这些做完之后，在你配置的服务器地址文件下把生成的latest.yml文件以及exe文件放进去。它会与本地安装地址的latest.yml进行比较，如果服务器地址中的yml的版本比本地的高，就会进行版本更新。想要修改版本号，更改package.json文件中的"version"，再进行打包即可。

好啦，这就是electron的打包+更新总结啦，过程可真的是艰难险阻，问题百出啊，不过好在是都已经解决啦～特此记录分享给大家

electron-updater的文档地址：https://www.electron.build/auto-update