插件名称:vue-cli-plugin-electron-builder

推荐理由:比simulatedgreg/electron-vue要简单不少

Github地址:

nklayman/vue-cli-plugin-electron-builder​github.com
3095be7aa1f7a5b86a3c75e5b67e39c2.png

长话短说,直接上代码,先安装electron-updater

npm install electron-updater --save

然后在background.js中加入相关代如下:

import { app, protocol, BrowserWindow, ipcMain } from 'electron'
import { autoUpdater } from "electron-updater" //注意此处
//忽略无关代码
ipcMain.on("checkUpdate", () => {
	//处理更新操作
	const returnData = {
		error: {
			status: -1,
			msg: '更新时发生意外,无法进行正常更新!'
		},
		checking: {
			status: 0,
			msg: '正在检查更新……'
		},
		updateAva: {
			status: 1,
			msg: '正在升级……'
		},
		updateNotAva: {
			status: 2,
			msg: '开始加载程序……'
		}
	};

	//更新连接
	autoUpdater.setFeedURL('http://ursite.com/release/');

	//更新错误事件
	autoUpdater.on('error', function (error) {
		sendUpdateMessage(returnData.error)
	});

	//检查事件
	autoUpdater.on('checking-for-update', function () {
		sendUpdateMessage(returnData.checking)
	});

	//发现新版本
	autoUpdater.on('update-available', function (info) {
		sendUpdateMessage(returnData.updateAva)
	});

	//当前版本为最新版本
	autoUpdater.on('update-not-available', function (info) {
		setTimeout(function () {
			sendUpdateMessage(returnData.updateNotAva)
		}, 1000);
	});

	//更新下载进度事件
	autoUpdater.on('download-progress', function (progressObj) {
		splashWindow.webContents.send('downloadProgress', progressObj)
	});


	//下载完毕
	autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
		//退出并进行安装(这里可以做成让用户确认后再调用)
		autoUpdater.quitAndInstall();
	});

	//发送消息给窗口
	function sendUpdateMessage(text) {
		splashWindow.webContents.send('message', text)
	}

	//发送请求更新
	autoUpdater.checkForUpdates();
});

在Splash Window的Vue文件中中,加入更新检测:

mounted() {
	let me = this;
	//请求检查更新
	this.$electron.ipcRenderer.send("checkUpdate");

	//下载中收到的进度信息
	this.$electron.ipcRenderer.on("downloadProgress", (event, data) => {
		me.prograssStyle.width = data.percent.toFixed(2) + "%";//更新进度条样式
		me.stepText = "正在更新中(" + me.prograssStyle.width + ")...";
	});

	//监听请求更新响应,用来处理不同的事件
	this.$electron.ipcRenderer.on("message", (event, data) => {
		me.stepText = data.msg;
		switch (data.status) {
			case -1:
				alert(data.msg);
				//退出程序
				this.$electron.ipcRenderer.send("logout");
				break;
			case 2:
				me.downloadDb();//下载sqlite数据库文件
				break;
		}
	});
}

修改vue.config.js并新增编译参数:

module.exports = {
	pluginOptions: {
		electronBuilder: {
			builderOptions: {
				"productName": "XXXX",//不要出现中文,除非你Apache支持中文路径
				"appId": "com.xxx.xxx",
				"win": {
					"publish": [
						{
							"provider": "generic",
							"url": "http://ursite.com/release/" //更新服务器地址,可为空
						}
					]
				}
			}
		}
	}
}

现在我们在centos上安装Apache服务并启动它:

yum install httpd

然后在/var/www/html目录下创建release目录,并将开发机器上的host改成xxx.xx.xxx.xx ursite.com

回到项目中来,打开package.js,把version改成1.0.0,执行构建命令:

npm run electron:build

你应该会见到在dist_electron目录下会出现以下三个文件:

0e3d11f9b0daa3fd56f0740ce2937200.png
我这里是1.2.0,忽视即可

不要动里面任何东西,将这三个文件上传到服务器上的release目录下。然后再将package.js中的version改成1.1.0,也上传到服务器首行,覆盖latest.yml。

最后,再将package.js中的version改回1.0.0,开始进行测试。

Good luck。

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐