electron vue热更新,含源码

electron热更新

完成后的源码下载：

git clone https://gitee.com/lgpr/electron-vue-update.git

源码需要修改一些东西，如你的静态文件地址，本源码仅供参考。

一、项目生成
1.vue脚手架安装，主要是可以使用vue init命令
2.

git clone https://gitee.com/lgpr/ev.git

用我给的ev生成一个electron项目（基于electron_vue脚手架），可以避免一些简单问题影响心情，当然如果你自己已经build好了electron应用,先看文章最后关键点。

vue init ./ev electron_update 

npm i 这个不用说吧

npm i adm-zip

如果想换npm 源
npm config set registry http://r.cnpmjs.org
npm config set registry http://registry.npm.taobao.org/

npm run dev 可以看到

上面这一步算最简单，这步都做不到，下面就没得看了。

二、更新原理
1.npm run build 打包下我们可以在项目目录的build下看到安装包
2.安装后，进到这个执行程序的安装目录看到有个app文件夹

这个文件夹就是应用所有资源的包，这个包换了，更新就完成了

3.流程简述

• 应用打开,渲染线程也就是app.vue，发送消息
• 主线程也就是index.js,收到消息执行更新代码（检测版本，不一致，下载更新zip包）
• 覆盖压缩重启 （更新完成）

三、具体代码
1.主线程 - main/index.js

import { app, BrowserWindow,ipcMain } from 'electron'
import {updateVersion} from '@/utils/updateApp'

// update监听
ipcMain.on('app-update', (event, ...args) => {
  updateVersion()
})

这个updateApp.js代码是

https://gitee.com/lgpr/electron-vue-update/blob/master/electron_update/src/util/updateApp.js

2.渲染线程（renderer/app.vue）

const { ipcRenderer,app } = require('electron');
 mounted(){
    // 更新版本
     ipcRenderer.send('app-update', "")
   },

3.把你的打包后的新package.json 和app打成app.zip包放在你的静态资源目录下。
package.json中的version携带了版本号信息，可以用于比对，更改他

app.zip就是你打的更新资源包
我这边代码地址是

const fileUrl = "http://www.tt.com/win32/";//这里需要修改为自己的资源外网

所以你应该能看到他，从浏览器

实现有个关键点package.json配置

"asar": false,

最后可以实现dialog更新提示，文件判断处理，提示更新信息，不知道这个教程有没有用。