electron+vue-cli4使用electron-updater自动更新

悠悠 2023-03-02 07:44 12阅读 0赞

### 一.软件版本 ###

当前 vue: 4.4.6  
项目依赖包，package.json

"devDependencies": { 
        "electron": "^3.0.0",
        "vue-cli-plugin-electron-builder": "^1.3.6",
        "electron-log": "^3.0.7",
        "electron-store": "^2.0.0",
        "electron-updater": "^4.1.2"
      },

### 二.自动更新配置 ###

在background.js引入加入相关代码

import { autoUpdater} from "electron-updater"
    import {  ipcMain} from 'electron'
    
    //监听相关事件
    autoUpdater.on('checking-for-update', () => { 
        sendStatusToWindow('Checking for update...');
    })
    autoUpdater.on('update-available', (ev, info) => { 
        sendStatusToWindow('Update available.');
    })
    autoUpdater.on('update-not-available', (ev, info) => { 
        sendStatusToWindow('Update not available.');
    })
    autoUpdater.on('error', (ev, err) => { 
        sendStatusToWindow('Error in auto-updater.');
    })
    autoUpdater.on('download-progress', (ev, progressObj) => { 
        sendStatusToWindow('Download progress...');
    })
    autoUpdater.on('update-downloaded', (ev, info) => { 
        sendStatusToWindow('Update downloaded; will install in 5 seconds');
    });
    //发送消息到窗体
    function sendStatusToWindow(text) { 
        win.webContents.send('message', text);
    }
    
    //初始化完成，窗口创建完成后开始检查更新
    app.on('ready', function () { 
        autoUpdater.checkForUpdates();
    });
    
    //下载完成监听，处理事件
    autoUpdater.on('update-downloaded', (ev, info) => { 
        // Wait 5 seconds, then quit and install
        // In your application, you don't need to wait 5 seconds.
        // You could call autoUpdater.quitAndInstall(); immediately
        setTimeout(function () { 
            win.focus(); // 弹窗置顶设置
            dialog.showMessageBox(win,{ 
                type: 'info',
                title: '自动升级',
                message: '检测到有新版本，是否立即升级？',
                buttons: ['下次升级','立即升级']
            },(index)=>{ 
                if(index===1){ 
                    autoUpdater.quitAndInstall();
                }
            })
        }, 1000)
    })

##### 相关配置 #####

在配置文件vue.config.js里面加入

pluginOptions: { 
        electronBuilder: { 
          builderOptions: { 
            win: { 
              icon: './build/icons/icon.ico',
              target: [
                { 
                  target: "nsis",//利用nsis制作安装程序
                  arch: [
                    "x64",//64位
                    "ia32"//32位
                  ]
                }
              ]
            },
            nsis: { 
              "oneClick": false, // 是否一键安装
              "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
              "allowToChangeInstallationDirectory": true, // 允许修改安装目录
              "installerIcon": "./build/icons/icon.ico",// 安装图标
              "uninstallerIcon": "./build/icons/icon.ico",//卸载图标
              "installerHeaderIcon": "./build/icons/icon.ico", // 安装时头部图标
              "createDesktopShortcut": true, // 创建桌面图标
              "createStartMenuShortcut": true,// 创建开始菜单图标
              "shortcutName": "test System", // 图标名称
            },
            mac: { 
              icon: './public/favicon.png'
            },
            publish: [
              { 
                provider: "generic",
                url: "http://192.0.xx.xx:8080/",//隐藏版本服务器地址
              }
            ],
            productName: 'testDemo'
          }
        }
      }

下载路径:

> C:\\Users\\admin\\AppData\\Local\\pc-demo-updater