基于electron-vue 实现打包桌面应用，自动更新，自定义安装目录（实际项目开发记录篇）

最新推荐文章于 2024-05-27 16:43:55 发布

孤身不觉晚

最新推荐文章于 2024-05-27 16:43:55 发布

阅读量1.8k

点赞数 4

本文链接：https://blog.csdn.net/qq_40043424/article/details/109484153

版权

首先在此感谢两位大佬的博客：vue+electron 打包，自动更新，修改默认安装目录，electron-vue实现自动更新功能

接下来按照项目实践总结如下：
1、在vue-electron的基础上，创建一个名为electron-demo的项目

	//安装 vue-cli 和 脚手架样板代码
	npm install -g vue-cli
	vue init simulatedgreg/electron-vue electron-demo
	//安装依赖并运行你的程序
	cd electron-demo
	yarn  install
	yarn  run dev

2、利用electron-updater来实现自动更新

预览了electron-vue实现自动更新功能这篇博客，按照大佬写的博客顺下来也就实现了自动更新，亲测有效，在此就不嚼他人之食了,自己去预览吧。需要注意的一点就是尽量使用yarn,因为我用npm打包报了好多错误。

3、自定义安装目录

预览了vue+electron 打包，自动更新，修改默认安装目录这篇博客，但大佬的博客写的有点复杂，所以我简化了一下，按照我项目需求，实现自定义安装目录的功能，实例如下：

//package.json  build中添加
"nsis": {
      "oneClick": false, // 一键安装，如果设为true，nsis设置就无意义请直接删除 nsis 配置
      "perMachine": true,    // true全用户安装【目录为：C:\Program Files (x86)】，false安装到当前用户
      "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
     "allowToChangeInstallationDirectory": true,// 允许修改安装目录
      "createDesktopShortcut": true,  // 创建桌面图标
      "createStartMenuShortcut": true // 创建开始菜单图标
    }

下面是我初次使用 electron-vue遇到的小问题：
1、去掉头部菜单栏

// ./src/main/index.js中
function createWindow () {
  /**
 1. Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
      nodeIntegration: true
    }
  })

  mainWindow.loadURL(winURL)

  let feedUrl = "http://localhost:80/demo/";
  //检测版本更新
  updateHandle(mainWindow,feedUrl);

  mainWindow.on('closed', () => {
    mainWindow = null
  })
  //隐藏顶部菜单
  mainWindow.setMenu(null);  
}

2、修改头部项目名称和图标

// ./src/index.ejs
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Golden Eagle</title>  //这里修改头部项目名

./build/icons下的图片替换成你需要的图片，名称大小不要变，即可实现替换图标。

3、打包生成桌面程序后，./build/ 下的.exe文件就是安装包，点击即可实现程序安装。

4、手动确认更新

// Update.js 中
//监听下载完成事件
    autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl) {
        sendUpdateMessage({
            cmd: 'update-downloaded',
            message: {
                releaseNotes,
                releaseName,
                releaseDate,
                updateUrl
            }
        })
        // 加一个名为updateNow的方法，触发执行安装更新包
        ipcMain.on('updateNow', (e, arg) => {
            autoUpdater.quitAndInstall();//退出并安装更新包
        })
    });

    //  app.vue 中
    ipcRenderer.on("message", (event, arg) => {
   //是否有新版本并是否下载成功
        if ("update-available" == arg.cmd) {
        //显示升级对话框
        self.dialogVisible = true;
      } else if ("download-progress" == arg.cmd) {
        // console.log(arg.message.percent);
        let percent = Math.round(parseFloat(arg.message.percent));
        self.percentage = percent;
      } else if ("error" == arg.cmd) {
        self.dialogVisible = false;
        self.$message(arg);
      } else if ("update-not-available" == arg.cmd) {
        // self.$message(arg);
      } else if ("update-downloaded" == arg.cmd) {
        this.$confirm("新版本下载完成, 是否升级?", "提示", {
          confirmButtonText: "升级",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            ipcRenderer.send("updateNow"); //执行安装更新包
          })
          .catch(() => {
              self.dialogVisible = false;
          });
      }
    });

首次接触桌面应用，首次使用electron-vue,不是很精，所以此篇若有不妥可接受文绉绉的批评！

孤身不觉晚

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
基于electron-vue 实现打包桌面应用，自动更新，自定义安装目录（实际项目开发记录篇）

首先在此感谢两位大佬的博客：vue+electron 打包，自动更新，修改默认安装目录，electron-vue实现自动更新功能接下来按照项目实践总结如下：1、在vue-electron的基础上，创建一个名为electron-demo的项目 //安装 vue-cli 和脚手架样板代码 npm install -g vue-cli vue init simulatedgreg/electron-vue electron-demo //安装依赖并运行你的程序 cd electron-demo
复制链接

扫一扫