electron-builder打包配置+electron-updater应⽤更新完整教程。。。electron打包以及应⽤⾃动更新
⼀.electron-builder
1.electron-builder安装及配置
安装命令：yarn add electron-builder --dev 或 npm install electron-builder --dev
(PS: 官⽅推荐使⽤yarn安装，说是能更好的处理依赖之间的关系)
安装好之后，配置package.json⽂件:
"appId":"",// appid，‘’格式"productName":"appname",// 应⽤的名称
"directories":{
"output":"dist"// 打包存在哪个⽂件夹，这么写的话打包好的exe就会⽣成在dist中},
"publish":[// 配合electron-updater来⽤
{
"provider":"generic",// 服务器供应商
"url":"oss.poooli/download/app/desktop/"//服务器地址
}
],
"files":[
"src/resources"// 在这⾥可以⾃定义打包⽂件
],
"nsis":{
"oneClick":false,
"allowElevation":true,
"allowToChangeInstallationDirectory":true,
"installerIcon":"src/resources/icons/icon.ico",
"uninstallerIcon":"src/resources/icons/icon.ico",
"installerHeaderIcon":"src/resources/icons/icon.ico",
"createDesktopShortcut":true,
"createStartMenuShortcut":true,
"shortcutName":"name"
},
"dmg":{
"contents":[
{
"x":410,
"y":150,
"type":"link",
"path":"/Applications"
},
{
"x":130,
"y":150,
"type":"file"
}
]
},
"mac":{
"icon":"src/resources/icons/icon.icns"
},
"win":{
"icon":"src/resources/icons/icon.ico",
"target":[
{
"target":"nsis",
"arch":[
"ia32"
]
}
]
},
"linux":{
"icon":"src/resources/icons/icon.ico"
}
},
配置build之后就可以在"script"中⾃定义打包命令了：
"compile":"electron-webpack",
"dist":"npm run compile && electron-builder",
"dist:dir":"npm run dist --dir -cpression=store -c.mac.identity=null"
},
运⾏yarn dist或者npm run dist就可以打包⽂件啦，上⾯的配置，可以让我们在项⽬中的dist⽂件夹中到我们打包好的exe⽂件，点击就可以安装啦
2.electron-builder打包时遇到的问题及解决
electron打包失败： part download request failed with status code 403
在⼀切都配置完成之后，运⾏yarn dist还是遇到了问题。因为连接的是国外的⽹站，⽽第⼀次打包⼜要不断从github获取资源，导致连接超时。下⾯附上解决⽅案：
1、设置淘宝镜像
在C:\Users\Administrator到.npmrc在⾥⾯加⼊以下两句代码：
registry=registry./
ELECTRON_MIRROR=/mirrors/electron-builder-binaries/
打包成功。。。
点击exe⽂件⼀步⼀步安装⼜遇到
cannot find module 'source-map-support/source-map-support.js'
将source-map-support模块复制⼀份到dependencies重新打包
⼆. electron-updater
安装命令：yarn add electron-updater --save
注意：安装之后的updater⼀定是要在"dependencies"⾥的，不然不起作⽤
主进程更新应⽤代码如下（注意⼀定是要在main.js⽂件或者是在main⽂件夹下的index.js⽂件下的）
import{ autoUpdater }from'electron-updater'
const isDevelopment = v.NODE_ENV!=='production';
let mainWindow;
<('ready',()=>{
mainWindow =createMainWindow();
if(!isDevelopment)updateHandle()
})
function updateHandle(){
let message ={
error:'检查更新出错',
checking:'正在检查更新……',
updateAva:'检测到新版本，正在下载……',
updateNotAva:'已经是最新版本，不⽤更新',
};
const feedUrl ='oss.poooli/download/app/desktop/'+ process.platform;
/
/ 设置上传的服务器地址
autoUpdater.setFeedURL(feedUrl);
<('error',function(error){
, error)
});
// 在检查更新是否开始时发出。
<('checking-for-update',function(){
sendUpdateMessage(message.checking,'')
});
/**
/**
* info UpdateInfo（适⽤于通⽤和github提供程序）| VersionInfo（⽤于Bintray提供程序）
* 有可⽤更新时发出。如果autoDownload为，则会⾃动下载更新true。
*/
<('update-available',function(info){
sendUpdateMessage(message.updateAva, info)
});
// 没有可⽤更新时触发
<('update-not-available',function(info){
sendUpdateMessage(message.updateNotAva, info)
});
// 更新下载进度事件
<('download-progress',function(progressObj){
mainWindow.webContents.send('downloadProgress', progressObj)
})
// 开始下载
<('update-downloaded',function(event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate){
/**
* 和渲染进程通信，如果接收到"isUpdateNow"则调⽤autoUpdater.quitAndInstall();
* 退出应⽤程序并安装
*/
<('isUpdateNow',(e, arg)=>{
console.log(arguments);
console.log("开始更新");
//some code here to handle event
autoUpdater.quitAndInstall();
});
mainWindow.webContents.send('isUpdateNow')
});
electron vue教程("checkForUpdate",()=>{
//执⾏⾃动更新检查
autoUpdater.checkForUpdates();
})
}
/
/ 通过main进程发送事件给renderer进程，提⽰更新信息
function sendUpdateMessage(text, info){
mainWindow.webContents.send('message', text, info)
}
渲染进程代码如下：
export default{
name:"index",
data(){
return{};
},
mounted(){
this.listenUpdate();
},
destroyed(){
v.NODE_ENV==="production"){
}
},
methods:{
listenUpdate(){
ipcRenderer.send("checkForUpdate");
<("message",(event, text, info)=>{
console.log("arguments====", arguments);
console.log("event,text====", event, text, info);
});
<("downloadProgress",(event, progressObj)=>{
console.log("progressObj===", progressObj);
this.downloadPercent = progressObj.percent ||0;
});
<("isUpdateNow",()=>{
// 下载完成之后提⽰⽤户更新程序
let myNotification =new Notification("更新包下载完成",{
body:"更新包下载完成，点击通知重启应⽤更新应⽤到最新版本！"
});
console.log("通知被点击");
ipcRenderer.send("isUpdateNow");
};
});
}
}
}
这些做完之后，在你配置的服务器地址⽂件下把⽣成的l⽂件以及exe⽂件放进去。它会与本地安装地址的l进⾏⽐较，如果服务器地址中的yml的版本⽐本地的⾼，就会进⾏版本更新。想要修改版本号，更改package.json⽂件中的"version"，再进⾏打包即可。
好啦，这就是electron的打包+更新总结啦，过程可真的是艰难险阻，问题百出啊，不过好在是都已经解决啦～特此记录分享给⼤家
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论