上次成功搭建了vue + electron的helloworld程序，這次將electron應用打包及自動升級的流程梳理了一下。
1. 應用打包
使用electron builder打包只需要在vue.config.js中配置即可，這里需要注意的是，默認情況下electron builder打包出來的安裝程序是不能修改安裝目錄的，需要allowToChangeInstallationDirectory這個配置設置為true。
// see https://cli.vuejs.org/config
module.exports = {
productionSourceMap: false,
pluginOptions: {
electronBuilder: {
nodeIntegration: true,
builderOptions: {
appId: 'com.itqn.electron.helloworld',
productName: 'helloworld',
// see https://www.electron.build/configuration/publish#genericserveroptions
publish: {
provider: 'generic',
url: 'http://192.168.1.100/itqn/electron/helloworld'
},
win: {
// must be at least 256x256
icon: './public/favicon.ico'
},
asar: false,
nsis: {
oneClick: false,
// 允許修改安裝目錄
allowToChangeInstallationDirectory: true,
allowElevation: true,
createDesktopShortcut: true,
createStartMenuShortcut: true,
shortcutName: 'helloworld'
}
}
},
configureWebpack: {
resolve: {
symlinks: true
}
}
}
}
接着執行下面的命令進行應用打包
npm run electron:build
如果成功打包，將為在項目的dist_electron目錄中生成對應的exe。
打包過程中可能出現favicon.icon must be at least 256x256的錯誤，這里需要在網上用工具將icon轉化為256x256的即可。
2. 自動升級
使用electron的自動升級功能，需要安裝electron-updater這個依賴，這里只是開發時用到，所以使用-D安裝。
npm install electron-updater -D
編寫更新程序update.js
import { dialog } from 'electron'
import { autoUpdater } from 'electron-updater'
import http from 'http'
// see https://www.electron.build/auto-update#events
autoUpdater.on('update-downloaded', info => {
if (process.env.NODE_ENV === 'production') {
// https://electronjs.org/docs/api/auto-updater#autoupdaterquitandinstall
// 這里先拉取更新信息，在對話框中顯示版本的更新內容
const req = http.request('http://192.168.1.3/itqn/electron/helloworld/info.txt', req => {
let detail = ''
req.setEncoding('utf-8')
req.on('data', chunk => {
detail += chunk.toString()
})
req.on('end', () => {
dialog.showMessageBox(
{
icon: __static + '/favicon.png',
type: 'info',
title: '軟件更新',
message: `已更新到最新版本（${info.version}）請重啟應用。`,
detail: detail,
buttons: ['確定']
},
idx => {
// 點擊確定的時候執行更新
if (idx === 0) {
autoUpdater.quitAndInstall()
}
}
)
})
})
req.end()
}
})
export default autoUpdater
然后在程序啟動的時候進行版本檢測，如果有新版會自動更新。
在background.js中引入update.js，並在ready事件中檢測版本。
import autoUpdater from './update'
app.on('ready', async () => {
// 這里只在生產環境才執行版本檢測。
if (process.env.NODE_ENV === 'production') {
autoUpdater.checkForUpdates()
}
createWindow()
})
這樣，Electron桌面應用程序就支持在線自動更新了，下面將使用nginx進行自動更新測試。
3. 升級測試
默認情況下，創建應用的版本為0.1.0，這里測試應用從0.1.0自動升級為0.1.1。
安裝 0.1.0 版本
為了測試應用自動更新，需要在本地安裝一個0.1.0版本，將應用打包成exe，然后安裝在自己的電腦上。
升級版本為 0.1.1
將應用升級為 0.1.1 版本，只需要將package.json中的版本號更新為0.1.1即可。
{
"name": "electron-helloworld",
"version": "0.1.1",
}
這里為了測試方便，可以在Helloworld.vue中加入版本，或者讀取應用版本號。
<div>{{txt}}</div>
<button @click="readTxt">讀取文件信息</button>
<div>v0.1.1</div>
重新打包應用，打包成功后dist_electron目錄中會多出幾個文件，下面這三個是升級需要用到的：
helloworld Setup 0.1.1.exe
helloworld Setup 0.1.1.exe.blockmap
latest.yml
發布新版本 0.1.1
新版本打包后需要發布到服務器中，這里可以使用nginx做為服務器。
需要注意的是，應用程序中指定的服務器更新地址為：
http://192.168.1.3/itqn/electron/helloworld
所以必須將應用發布到這里，才能實現自動升級（這里我使用的是本地IP，實際使用應該是用域名）。
使用nginx作為服務器，需要在本地安裝nginx，可以在官網下載nginx，解壓即可。
修改nginx的配置conf/nginx.conf
http {
server {
listen 80;
location / {
root D:/nginx/www;
}
}
}
這里指定了nginx的root為D:/nginx/www，所以需要在www這個目錄下創建itqn/electron/helloworld這個目錄，最終的目錄路徑為：
D:\nginx\www\itqn\electron\helloworld
將新版本打包的三個文件放到helloworld這個目錄中，然后新增一個info.txt文件編寫更新內容，最后helloworld目錄下的文件如下：
helloworld Setup 0.1.1.exe
helloworld Setup 0.1.1.exe.blockmap
latest.yml
info.txt
啟動nginx服務器
start nginx.exe
如果服務啟動正常，通過瀏覽器訪問<http://192.168.1.3/itqn/electron/helloworld/info.txt>將可以看到更新內容。
最后啟動已經安裝好0.1.0程序。
可以看到程序啟動后，彈出了新版本的更新內容，這里點擊確定執行更新，更新成功后會自動重啟應用。
下面是更新后的界面，可以看到應用已經更新到了最新版本0.1.1。
項目源碼可關注公眾號 “HiIT青年” 發送 “electron-autoupdate” 獲取。（如果沒有收到回復，可能是你之前取消過關注。）
關注公眾號，閱讀更多文章。