基于electron-vue 实现打包桌面应用,自动更新,自定义安装目录(实际项目开发记录篇)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/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
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 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)