Vue 學習之 Electron 使用github 自動更新

1.安裝electron-updater

• 使用yarn

yarn add electron-updater

• 或者使用 npm

npm install electron-updater

2.使能 發佈到Github 功能

添加 publish: [‘github’] 到你在vue.config.js 中 Electron Builder 的配置

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        publish: ['github']//此處寫入github 就好，不用添加其他內容
      }
    }
  }
}

3.在background.(js|ts) 中添加檢測更新

...
+  import { autoUpdater } from "electron-updater"
...

if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
 1.   autoUpdater.checkForUpdatesAndNotify()
  }
...

4.生成GitHub access token

1. https://github.com/settings/tokens/new 先去生成 token，然後自己複製一下，記得存到記事本，因爲只會出現一次
2. 加入環境變量
   On macOS/linux:

export GH_TOKEN="<YOUR_TOKEN_HERE>"

On Windows, run in powershell:

[Environment]::SetEnvironmentVariable("GH_TOKEN","<YOUR_TOKEN_HERE>","User")

然後重啓 powershell ，環境變量纔會有效

5.添加腳本

然後在package.json中添加

 "scripts": {
     "publish": "vue-cli-service electron:build --win --x64 -p always"
 }

6.上傳GitHub 併發布

上傳GitHub

npm run publish

or

With Yarn:

yarn electron:build -p always

or with NPM:

npm run electron:build -- -p always

發佈

在GitHub中打開您的倉庫，然後單擊發布選項卡。您應該看到包含所有二進制文件的新版本的草稿。發佈此版本，以便用戶可以對其進行更新。

7.檢查更新

安裝您的應用程序，然後運行它。您尚未收到更新通知，因爲這是最新版本。您必須通過增加中的version字段來發布新版本package.json，然後重複前面的3個步驟。現在，您的舊應用應該會向您發送更新通知。

源碼GitHub
參考
https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/recipes.html#auto-update
https://www.jianshu.com/p/f6726ada78ff