electron-update + nginx热更新

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.jpgautoindex 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.jpgautoindex 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;}
}

6.将打包好的文件上传到 /home/dists/engineering_ui/updates/

然后本地打包一个版本低于1.1.0的，安装后 ，打开应用就可以提示更新了。