使用electron-packager electron-builder electron-updater 打包vue專案，支援線上更新
阿新 • • 發佈：2021-06-18
1.如何用electron-packager electron-builder打包vue專案，打包成桌面程式。
步驟一、
執行npm run build 打包你的vue專案。
打包成功後，生成dist打包後的檔案。
在dist開啟命令列，安裝electron-packager electron-builder
安裝命令 npm installelectron-packager npm installelectron-builder
在dist中新增main.js檔案，其中內容包括
| 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 |
const {app, BrowserWindow,globalShortcut,ipcMain} =require('electron')
letwin;
letwindowConfig = {
fullscreen:true,
width:800,
height:600
};
const {autoUpdater}=require('electron-updater');
functioncreateWindow(){
win =newBrowserWindow(windowConfig);
win.loadURL(`file://${__dirname}/index.html`);
app.setApplicationMenu(null);//關閉選單欄
// 註冊一個 'CommandOrControl+X' 的全域性快捷鍵
globalShortcut.register('CommandOrControl+Alt+K', () => {
win.webContents.openDevTools();//開啟除錯工具
});
win.on('close',() => {
//回收BrowserWindow物件
win =null;
});
win.on('resize',() => {
win.reload();
})
}
app.on('ready',createWindow);
app.on('window-all-closed',() => {
app.quit();
});
app.on('activate',() => {
if(win ==null){
createWindow();
}
});
// 檢測更新，在你想要檢查更新的時候執行，renderer事件觸發後的操作自行編寫
!functionupdateHandle() {
letmessage = {
error:'檢查更新出錯',
checking:'正在檢查更新……',
updateAva:'檢測到新版本，正在下載……',
updateNotAva:'現在使用的就是最新版本，不用更新',
};
const uploadUrl ="更新包所在的伺服器地址";// 下載地址，不加後面的**.exe
autoUpdater.setFeedURL(uploadUrl);
autoUpdater.on('error',function(error) {
console.log(autoUpdater.error);
sendUpdateMessage(message.error)
});
autoUpdater.on('checking-for-update',function() {
sendUpdateMessage(message.checking)
});
autoUpdater.on('update-available',function(info) {
sendUpdateMessage(message.updateAva)
});
autoUpdater.on('update-not-available',function(info) {
sendUpdateMessage(message.updateNotAva)
});
// 更新下載進度事件
autoUpdater.on('download-progress',function(progressObj) {
win.webContents.send('downloadProgress', progressObj)
});
autoUpdater.on('update-downloaded',function(event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
ipcMain.on('isUpdateNow', (e, arg) => {
//some code here to handle event
autoUpdater.quitAndInstall();
});
win.webContents.send('isUpdateNow')
});
ipcMain.on("checkForUpdate",()=>{
//執行自動更新檢查
autoUpdater.checkForUpdates();
})
}();
// 通過main程序傳送事件給renderer程序，提示更新資訊
functionsendUpdateMessage(text) {
win.webContents.send('message', text)
}
|
在dist資料夾下新增package.json檔案，其中包括內容為
| 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 |
{
"name":"名稱",
"productName":"專案名稱",
"author":"作者",
"version":"1.1.1",//版本
"main":"main.js",
"description":"專案描述",
"scripts": {
"pack":"electron-builder --dir",
"dist":"electron-builder",
"postinstall":"electron-builder install-app-deps"
},
"build": {
"electronVersion":"1.8.4",
"win": {
"requestedExecutionLevel":"highestAvailable",
"target": [
{
"target":"nsis",
"arch": [
"x64"
]
}
]
},
"appId":"專案的id,唯一id",
"artifactName":"名稱-${version}-${arch}.${ext}",
"nsis": {
"artifactName":"名稱-${version}-${arch}.${ext}"
},
"publish": [
{
"provider":"generic",
"url":"伺服器最新安裝包的位置"
}
]
},
"dependencies": {
"core-js":"^2.4.1",
"electron-updater":"^2.22.1",
"fs-extra":"^4.0.1",
"install.js":"^1.0.1",
"moment":"^2.18.1",
"moment-es6":"^1.0.0"
}
}
|
在你的vue專案裡面App.vue生命週期裡面新增如下程式碼：這是自動檢測更新
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
mounted:function() {
if(window.require) {
letipc = window.require('electron').ipcRenderer;
ipc.send("checkForUpdate");
ipc.on("message", (event, text) => {
this.tips = text;
console.log('message1',this.tips)
});
ipc.on("downloadProgress", (event, progressObj)=> {
this.downloadPercent = progressObj.percent || 0;
console.log('message2',this.downloadPercent)
});
ipc.on("isUpdateNow", () => {
ipc.send("isUpdateNow");
});
}
},
|
一切準備就緒之後在終端裡面執行命令：electron-builder
成功之後會生成一個安裝包及版本檔案
雙擊exe程式安裝之後就在桌面有快捷圖示就可以使用了，
如果你的程式有更新，一點要把你的安裝包及latest.yml放到你剛剛在package.json裡面更新檔案在伺服器的位置。
| 1 2 3 4 5 6 |
"publish": [
{
"provider":"generic",
"url":"http:/xxxx.com/download/"
}
]
|
| 1 |
download的檔案下面，<br>注意有個坑：
|
| 1 |
http:/xxxx.com/download/latest.yml一定要能訪問到並且在瀏覽器裡面可以輸出裡面的內容，否則更新程式會失敗。<br>檔案目錄如下：
|