首先在此感谢两位大佬的博客: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,不是很精,所以此篇若有不妥可接受文绉绉的批评!

GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐