Electron-vue版本更新_electron+vue更新

安装依赖
自动更新功能的实现依赖 electron-builder 和 electron-updater。
因为我们是用的electron-builder脚手架生成的项目，已经有 electron-builder 依赖了，所以只需要安装 electron-updater。
注意：把electron 和electron-builder 升级到最新版

npm i electron-updater --save # 必须安装为运行依赖，否则运行会出错
1

配置 package.json
为了配合打包 package.json 需要给 build 新增配置项：

  "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:7001/"
      }
    ],
1
2
3
4
5
6

主进程的入口文件是 src/main/index.js

import { app, BrowserWindow,Menu,ipcMain } from 'electron'
import '../renderer/store'

// 引入自动更新模块
const { autoUpdater } = require('electron-updater');

const feedUrl = `http://127.0.0.1:7001/public/win32`; // 更新包位置

if (process.env.NODE_ENV !== 'development') {
  global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}

let mainWindow, webContents;
const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:9080`
  : `file://${__dirname}/index.html`

function createWindow () {
  Menu.setApplicationMenu(null)  //设置菜单栏为空
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    //设置窗口的图标
    icon:'../../build/icons/icon.ico',
    height: 600,
    useContentSize: true,  
    width: 1000,
    //fullscreen: true,//可以设置全屏
    webPreferences:{
      nodeIntegration:true,  //是否支持node  默认是false
      contextIsolation:false,  //需要加入这个才可以打印fs
      webSecurity:false, //开启跨域
    }
  })

 mainWindow.loadURL(winURL)
 webContents = mainWindow.webContents;
   
  mainWindow.on('closed', () => {
    mainWindow = null
  })

}
//自动更新
// 主进程监听渲染进程传来的信息
ipcMain.on('update', (e, arg) => {
  console.log("update");
  checkForUpdates();
});

let checkForUpdates = () => {
// 配置安装包远端服务器
  autoUpdater.setFeedURL(feedUrl);

// 下面是自动更新的整个生命周期所发生的事件
  autoUpdater.on('error', function(message) {
      sendUpdateMessage('error', message);
  });
  autoUpdater.on('checking-for-update', function(message) {
      sendUpdateMessage('checking-for-update', message);
  });
  autoUpdater.on('update-available', function(message) {
      sendUpdateMessage('update-available', message);
  });
  autoUpdater.on('update-not-available', function(message) {
      sendUpdateMessage('update-not-available', message);
  });

  // 更新下载进度事件
  autoUpdater.on('download-progress', function(progressObj) {
      sendUpdateMessage('downloadProgress', progressObj);
  });
  // 更新下载完成事件
  autoUpdater.on('update-downloaded', function(event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
      sendUpdateMessage('isUpdateNow');
      ipcMain.on('updateNow', (e, arg) => {
          autoUpdater.quitAndInstall();
      });
  });

  //执行自动更新检查
  autoUpdater.checkForUpdates();
};

// 主进程主动发送消息给渲染进程函数
function sendUpdateMessage(message, data) {
  console.log({ message, data });
  webContents.send('message', { message, data });
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

渲染进程
这里我们主要修改 App.vue，将原来的内容全删掉并使更新的整个周期在界面上打印出来。

<template>
  <div id="app">
      <router-view></router-view>
      <button @click="autoUpdate()">获取更新</button>
      <ol id="content">
          <li>生命周期过程展示</li>
      </ol>
  </div>
</template>

<script>
// import { ipcRenderer } from 'electron';
const { ipcRenderer } = require('electron');
export default {
name: 'my-project1',
mounted() {
    var _ol = document.getElementById("content");
    ipcRenderer.on('message',(event,{message,data}) => {
        let _li = document.createElement("li");
        _li.innerHTML = message + " <br>data:" + JSON.stringify(data) +"<hr>";
        _ol.appendChild(_li);
        if (message === 'isUpdateNow') {
        if (confirm('是否现在更新？')) {
            ipcRenderer.send('updateNow');
          }
      }
    });
},
methods: {
  autoUpdate() {
    ipcRenderer.send('update');
  }
}
};
</script>

<style>
/* CSS */
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

显示的界面如下

自动更新过程简单介绍
1.将 package.json 里的版本号先改为 0.0.2，然后npm run build生成一个版本为0.0.2的安装包。


注意上面一步会生成一个latest.yml文件，autoUpdate 实际上通过检查该文件中安装包版本号与当前应用版本号对比来进行更新判断的。
latest.yml文件内容如下：

2.然后将上一步生成的安装包放在本地开启的服务器文件夹下，对应你在主程序入口文件中配置的服务器位置

3.将 package.json 中的版本号改回0.0.1，再npm run build一遍，运行 build 文件夹下的 exe 安装包，就将软件安装在你电脑里面了。点击安装完成后桌面上的快捷方式，再次点击上面的获取更新的按钮就可以看到显示在界面的自动更新生命周期了。
感谢这位博主