electron-update + nginx热更新

news2025/4/9 1:25:05

1.安装"electron-updater": “^6.6.2”,

npm i electron-updater

2.创建checkUpdate.js

// 引入自动更新
const {autoUpdater} = require('electron-updater');
const { dialog } = require('electron');
// 自动更新检查
export function checkForUpdates() {
  // 检查新版本
  autoUpdater.checkForUpdates();

  // 监听更新事件
  autoUpdater.on('checking-for-update', () => {
    console.log('正在检查更新...');
  });

  autoUpdater.on('update-available', () => {
    console.log('发现新版本...');
  });

  autoUpdater.on('update-not-available', () => {
    console.log('当前已经是最新版本.');
  });

  autoUpdater.on('error', (error) => {
    console.error('更新出错:', error);
  });

  autoUpdater.on('update-downloaded', (_) => {
    console.log('下载完成，准备安装...');
    // 下载完成后进行弹窗提示(也可以直接调用autoUpdater.quitAndInstall()进行更新)
    showUpdateDialog();
  });
}


// 创建弹窗提示
function showUpdateDialog() {
  dialog.showMessageBox({
    type: 'info',
    title: '更新可用',
    message: '发现新版本，需要立即更新！',
    buttons: ['立即更新']
  }).then(result => {
    if (result.response === 0) {
      /**
       * 用户点击 "立即更新" 按钮，执行更新
       * 形参:
       * 参数1：仅在静默模式下运行安装程序。默认为false（windows下有效）。
       * 参数2：即使是静默安装，也要在完成后运行应用程序。不适用于macOS。如果 参数1 设置为false，则忽略（在这种情况下，您仍然可以将autoRunAppAfterInstall设置为false以防止在完成后运行应用程序）
       */
      autoUpdater.quitAndInstall(true, true);
    }
  });
}

3.在 createWindow 后调用更新方法 checkForUpdates

app.on('ready', async() => {
  await createWindow()
  // 应用启动5秒后自动检查更新
  setTimeout(() => {
    // 调用上方的函数
    checkForUpdates()
  }, 5 * 1000) // 5秒后检查一次更新
})

4.在vue.cofing.js中添加配置

 pluginOptions: {
 electronBuilder: {
      builderOptions: {
        // build配置在此处
        'appId': 'project.manage.com',
        'productName': 'single-project',
        'directories': {
          'output': 'dist_electron'
        },
        'win': {
          'target': [
            'nsis',
            'zip'
          ],
          'icon': '/public/256.png'
        },
        // "win": {
        //   "target": "nsis"
        // },
        "publish": [
          {
            "provider": "generic",
            "url": "http://192.168.1.107:9400/updates/"
          }
        ],
        "nsis": {
          "oneClick": false,
          "allowToChangeInstallationDirectory": true,
          "perMachine": true,
          "deleteAppDataOnUninstall": true
        }
      }
    }
 }

5.nginx创建文件服务器，用来上传打包好的文件

nginx添加下面内容，

   location /updates/ {
        # 这一行 访问文件
        root   /home/dists/engineering_ui; #文件目录路径
        # 下面的不加也可以  加了 有目录功能 。  不加下面访问 ip:port/images/  `报403 Forbidden` ，但是可以访问  ip:port/images/abc.jpg
        autoindex on;    # 开启索引功能
        autoindex_exact_size on;  # 开启计算文件确切大小（单位bytes），不只显示大概大小（单位kb、mb、gb）
        autoindex_localtime on;   # 显示本机时间而非 GMT 时间
        client_max_body_size 1000m;  # 设置最大上传文件大小
        dav_methods PUT;  # 允许处理 PUT 请求
        create_full_put_path on;  # 创建完整的路径
        dav_access group:rw all:r;  # 设置文件权限

    }

完整配置

server {
    listen       9400;
    server_name  localhost;    
                
    location /api {
        root   html;  
        proxy_pass  http://192.168.1.107:9010;  
    }  
     location /updates/ {
        # 这一行 访问文件
        root   /home/dists/engineering_ui; # 文件目录路径
        # 下面的不加也可以  加了 有目录功能 。  不加下面访问 ip:port/images/  `报403 Forbidden` ，但是可以访问  ip:port/images/abc.jpg
        autoindex on;    # 开启索引功能
        autoindex_exact_size on;  # 开启计算文件确切大小（单位bytes），不只显示大概大小（单位kb、mb、gb）
        autoindex_localtime on;   # 显示本机时间而非 GMT 时间
        client_max_body_size 1000m;  # 设置最大上传文件大小
        dav_methods PUT;  # 允许处理 PUT 请求
        create_full_put_path on;  # 创建完整的路径
        dav_access group:rw all:r;  # 设置文件权限

    }      
    location = / {
        root /home/dists/engineering_ui/;
        index  index.htm  index.html;
    }
                 
      
    location ~ \.(htm|html|js|css|jpg|png|gif|eot|svg|ttf|woff|woff2)$ {  
        root   /home/dists/engineering_ui/;
    }    
 
  location / {
        root /home/dists/engineering_ui/;
 }
                
    error_page   500 502 503 504  /50x.html;
        location = /50x.html {
        root   /home/www;
    }
}