1. 新增依賴

"electron-updater": "^4.0.0"
升級的時候往往就是因為electron-updater版本不搭配，導致一些亂七八糟的問題出現，此時electron的版本是2.0.4，打包的時候如果electron-updater的版本小於4.0.0，會出現無法打包，所以修改electron-updater的版本為^4.0.0

2 配置更新程式的地址

開啟package.json檔案在build標籤下新增public配置，執行npm run build時，將會在build目錄中生成latest.yml檔案

這裡的的url對應的是升級包的所在目錄的網路地址，不用指向具體的升級包檔案。

以下放一張伺服器所在的升級包的目錄圖片，做過後臺開發的小夥伴一看就懂了。

舉例：

"publish": [

{ "provider": "generic",

"url": "http://119.30.229.43/app/version/p/"

}

]

url地址指向的是升級包所在目錄，升級包的檔名稱和yml的檔名稱沒有限制，可以隨意命名。

3 主程序中配置升級

新建一個checkupdate.ts檔案，或者自己建立JS檔案 內容如下

import { autoUpdater } from 'electron-updater'
import { ipcMain, BrowserWindow } 
 
from 'electron'
/**
 * -1 檢查更新失敗 0 正在檢查更新 1 檢測到新版本，準備下載 2 未檢測到新版本 3 下載中 4 下載完成
 **/
// 負責向渲染程序傳送資訊
function Message(mainWindow: BrowserWindow, type: Number, data?: String) {
    const senddata = {
        state: type,
        msg: data || ''
    }
    mainWindow.webContents.send('UpdateMsg', senddata)
}
 
// 更新應用的方法
export default (mainWindow: BrowserWindow) => {
    // 在下載之前將autoUpdater的autoDownload屬性設定成false，通過渲染程序觸發主程序事件來實現這一設定(將自動更新設定成false)
    autoUpdater.autoDownload = false
    //設定版本更新地址，即將打包後的latest.yml檔案和exe檔案同時放在
    //http://xxxx/test/version/對應的伺服器目錄下,該地址和package.json的publish中的url保持一致
    // https://sm2.35dinghuo.com/download/
    autoUpdater.setFeedURL('https://sm2.35dinghuo.com/download/')
    // 當更新發生錯誤的時候觸發。
    autoUpdater.on('error', (err) => {
        if (err.message.includes('sha512 checksum mismatch')) {
            Message(mainWindow, -1, 'sha512校驗失敗')
        }
    })
    // 當開始檢查更新的時候觸發
    autoUpdater.on('checking-for-update', (event, arg) => {
        Message(mainWindow, 0)
    })
    // 發現可更新資料時
    autoUpdater.on('update-available', (event, arg) => {
        Message(mainWindow, 1)
    })
    // 沒有可更新資料時
    autoUpdater.on('update-not-available', (event, arg) => {
        Message(mainWindow, 2)
    })
    // 下載監聽
    autoUpdater.on('download-progress', (progressObj) => {
        Message(mainWindow, 3, progressObj)
    })
    // 下載完成
    autoUpdater.on('update-downloaded', () => {
        Message(mainWindow, 4)
    })
    // 執行更新檢查
    ipcMain.handle('check-update', () => {
        autoUpdater.checkForUpdates().catch(err => {
            console.log('網路連線問題', err)
        })
    })
    // 退出並安裝
    ipcMain.handle('confirm-update', () => {
        autoUpdater.quitAndInstall()
    })

    // 手動下載更新檔案
    ipcMain.handle('confirm-downloadUpdate', () => {
        autoUpdater.downloadUpdate()
    })
}

4.在main/index.js主程序中進行匯入：

import Update from './checkupdate'; // 引入上面的檔案
   //檢測版本更新

Update(mainWindow);

5.渲染程序顯示更新進度

<template>
   <div class="systemExample width100 height100">
        <main>
            <div class="right-side">
                <div class="doc">
                    <div class="title alt">您可以點選的按鈕測試功能</div>
                    <el-button type="primary" round @click="CheckUpdate">檢查更新, 不可用於開發環境</el-button>
                </div>
            </div>
        </main>
        <el-dialog
                title="下載進度"
                :visible.sync="dialogVisible"
                :show-close="true"
                :close-on-press-escape="false"
                :close-on-click-modal="false"
                center
                width="50%"
                top="45vh">
            <div class="conten">
                <el-progress :percentage="percentage" :color="colors" :status="progressStaus"></el-progress>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    let ipcRenderer = require("electron").ipcRenderer;
    export default {
        name: "systemExample",
        data: () => ({
            percentage: 0,
            colors: [
                { color: "#f56c6c", percentage: 20 },
                { color: "#e6a23c", percentage: 40 },
                { color: "#6f7ad3", percentage: 60 },
                { color: "#1989fa", percentage: 80 },
                { color: "#5cb87a", percentage: 100 }
            ],
            dialogVisible: false,
            progressStaus: null,
        }),
        mounted () {
            ipcRenderer.on('UpdateMsg', (event, arg) => {
                switch (arg.state) {
                    case 1:
                        this.$confirm('檢查到商盟訂貨有新版本，是否更新?', '提示', {
                            confirmButtonText: '確定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.dialogVisible = true
                            this.$ipcApi.send("confirm-downloadUpdate")
                        })
                        break;
                    case 3:
                        this.percentage = arg.msg.percent.toFixed(1);
                        break;
                    case 4:
                        this.progressStaus = "success";
                        this.$alert("下載完成！", "提示", {
                           confirmButtonText: "確定",
                           callback: (action) => {
                           this.$ipcApi.send("confirm-update");
                          },
                        });
                        break;
                    default:
                        break;
                }
            })
        },
        methods: {
           // 下面方法點選按鈕去檢查，那麼如果你想實現應用開啟就去檢查呢，你就吧此檔案寫在你專案的根頁面，然後然後開始就去執行這個方法即可！
            CheckUpdate() {this.$ipcApi.send("check-update")},
        }
    };
</script>

6.最後上效果圖：