electron-vue打包,自动更新,配置nsis总结

研究electron-vue两个星期,总算踏进了开发的旅程,其中总会遇到一些坑,今天总结一下,写自动更新时遇到的问题及解决方案。

一、打包

electron-vue打包时,如果报错,基本上是因为网络问题,无法安装打包依赖到electron-builder里。基本上有3个必要的打包依赖:winCodeSign,nsis,nsis-resources。我的electron-builder的版本是22.3.2。因此他们需要的具体版本是winCodeSign-2.5.0,nsis-3.0.4.1,nsis-resources-3.4.1。

其次我也自己弄了一个electron-vue的模板,并且升级electron到了8.0.0版本,但是electron版本更替目前有点快,已经到9.0.0了,所以我暂时以8.0.0起步去做事情。

二、自动更新

自动更新因为以前没有经验,一直以为是个很难的东西,今天研究了一夜发现,just so so。成功的配置了所有必要的东西,实现了自动更新。并使用layer,jquery,使界面更友好,主要操作如下。

首先在package.json的build里添加如下的代码

publish内容

然后安装electron-updater库依赖

"publish": [
{
"provider": "generic",//暂时不知道干嘛的
"url":"http://127.0.0.1:2224/"//这就是你的更新地址
}
],

 

npm i electron-updater

 

我这里安装的版本是 ^4.2.2

强调:自动更新的软件electron版本和electron-updater的版本必须≥老版本的软件

然后在main/index.js即你的主进程里添加自动更新库的代码

//引入部分,最好放在头部
import { autoUpdater } from 'electron-updater';//引入自动更新库
//变量声明部分,也最好紧接着头部
let afterclosedupdate=false;//关闭后更新标识
const updateurl="http://127.0.0.1:2224/";//自动更新地址与package.json里的publish的url保持一致!

//自动更新更新监听部分,放在你觉得OK的位置
autoUpdater.on('error',(err)=>{
  mainWindow.webContents.send("err",err);  
});
autoUpdater.on('update-not-available', function (info) {
  mainWindow.webContents.send("needntupdate","无需更新");  
});
autoUpdater.on('update-downloaded', function (info) {
  console.log(info);
  mainWindow.webContents.send("downloaded",info); 
  ipcMain.on("Install",()=>{
    autoUpdater.quitAndInstall();
  }); 
  ipcMain.on("ClosedInstall",()=>{
    afterclosedupdate=true;
  }); 
});
// 监听检查更新按钮被按下
ipcMain.on("checkUpdate",()=>{
  autoUpdateSelf(updateurl);
});
/**
 * 更新调用函数
 * @param {string} updateURL //更新地址,要与package.json里的pubilsh.url一致
 */
function autoUpdateSelf(updateURL){
  autoUpdater.setFeedURL(updateURL);
  autoUpdater.checkForUpdates();
}

//关闭后更新部分,找到app.on("windwo-all-closed")监听
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    if(afterclosedupdate){
      autoUpdater.quitAndInstall();
      return;
    }
    app.quit()
  }
})

 

因为我用的是electron-vue脚手架,所以可以直接在渲染进程里写如下代码

methods:{
checkUpdate:function(){
this.$electron.ipcRenderer.send("checkUpdate");
}
},
mounted:function(){
            this.$electron.ipcRenderer.on("needntupdate",(event,msg)=>{
                layer.alert(msg);
            });
            this.$electron.ipcRenderer.on("err",(event,msg)=>{
                layer.alert(msg.toString());
            });
            this.$electron.ipcRenderer.on("downloaded",(event,msg)=>{
                layer.confirm("发现新版本"+msg.version+",是否现在更新?",{title:"更新提示",btn:["现在更新","关闭后更新"]},()=>{
                    this.$electron.ipcRenderer.send("Install");//立即更新
                },()=>{
                    this.$electron.ipcRenderer.send("ClosedInstall");//关闭后更新
                });
            });
        }

 

然后把更新文件上传到你自己的服务器上,我这是本地搭建所以直接上传到根目录即可。

必须包含打包生成后的latest.yml和你的安装包程序。

服务器更新目录下的东西

坑:当你在生成前调试模式时,可能会一直提示你更新,打包生成安装后,方可解决该问题!

以上代码大家自行看情况引用和添加,不要做伸手党!

三、nsis配置

在package.json里的build下添加如下配置对象

其他更多配置如下:

'nsis': {
    // 是否一键安装,建议为 false,可以让用户点击下一步、下一步、下一步的形式安装程序,如果为true,当用户双击构建好的程序,自动安装程序并打开,即:一键安装(one-click installer)
    'oneClick': false,
    // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
    'allowElevation': true,
    // 允许修改安装目录,建议为 true,是否允许用户改变安装目录,默认是不允许
    'allowToChangeInstallationDirectory': true,
    // 安装图标
    'installerIcon': 'build/installerIcon_120.ico',
    // 卸载图标
    'uninstallerIcon': 'build/uninstallerIcon_120.ico',
    // 安装时头部图标
    'installerHeaderIcon': 'build/installerHeaderIcon_120.ico',
    // 创建桌面图标
    'createDesktopShortcut': true,
    // 创建开始菜单图标
    'createStartMenuShortcut': true,
    // electron中LICENSE.txt所需要的格式,并非是GBK,或者UTF-8,LICENSE.txt写好之后,需要进行转化,转化为ANSI
    'license': 'LICENSE.txt'
  }

发表评论

电子邮件地址不会被公开。 必填项已用*标注