研究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": [
{
"provider": "generic",//暂时不知道干嘛的
"url":"[http://127.0.0.1:2224/"//这就是你的更新地址](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保持一致！](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'
  }