【electron】electron forge + vite + vue + electron-release-server 自动更新客户端

基本信息

electron forge vue页面（中文）：https://forge.electron.js.cn/guides/framework-integration/vue-3
electron forge vue页面（英文，中文版下面的tab无法点击）：https://www.electronforge.io/guides/framework-integration/vue-3
electron release server github link：https://github.com/ArekSredzki/electron-release-server
electron release server csdn说明link：https://blog.csdn.net/jinqiuxin/article/details/136356969

开始实现

服务器部署

数据库

在宝塔中使用PostgreSQL数据库
根据要求创建两个数据库，数据库名如下，但是用户不用太过关注，因为如果使用正常你创建的用户会出现权限问题，需要使用管理员账号
electron_release_server_sessions
electron_release_server

参考文档https://github.com/ArekSredzki/electron-release-server/blob/master/docs/database.md

关于其他的说明我们可以不用理会

服务部署

接下来我们开始部署网络上的服务器
参考文档：https://github.com/ArekSredzki/electron-release-server/blob/master/docs/deploy.md

# 查看nodejs版本
node --version
# 查看npm版本
npm --version
# 查看git版本
git --version

# 找到目录然后git clone这个库
cd /home/www/wwwroot/
git clone https://github.com/ArekSredzki/electron-release-server.git

# 项目初始化
cd electron-release-server/
npm install

# 开始配置项目
cp config/local.template config/local.js

开始配置项目

应用创建

引导创建应用

参考文档：https://forge.electron.js.cn/guides/framework-integration/vue-3

# 在本机找到开发目录
# 在开发目录初始化项目  其中`my-vue-app`改成自己的名字
npm init electron-app@latest my-vue-app -- --template=vite

# 添加依赖项
npm install vue
npm install --save-dev @vitejs/plugin-vue

按照官方文档修改对应文件。下面的参考文档是英文版，中文版的其中部分功能用不了。
参考文档：https://www.electronforge.io/guides/framework-integration/vue-3





其中有个设置需要在main中设置，否则会报错

process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';

配置发布

# 安装发布插件
npm install --save-dev @electron-forge/publisher-electron-release-server

参考文档：https://forge.electron.js.cn/config/publishers/electron-release-server

# 使用的时候可以直接发布
npm run publish

配置自动更新

参考文档：https://www.electronjs.org/zh/docs/latest/tutorial/updates

此处是一个重点，因为其中平台的部分很容易出现问题，导致拉去的数据不正确
http://111.172.107.13:1337/update/osx_arm64/2.0.0/stable

代码参考

如何加入路由

参考文档：https://router.vuejs.org/zh/installation.html

# 引入
npm install vue-router@4

创建router文件夹并在其中创建index.js

import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
   {
       path: "/",
       name: "home",
       component: () => import("../views/home.vue")
   },
   {
       path: "/about",
       name: "about",
       component: () => import("../views/about.vue")
   }
];

const router = createRouter({
   history: createWebHashHistory(),
   routes: routes
});

export default router;

在renderer.js中设置路由

修改改App.vue

添加home.vue

添加`about.vue`
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/82c4363d03f549ea8feae4f75f921bcc.png)
经过测试可以正常切换

在这里插入代码片

加入UI库

UI库参考文档：https://www.naiveui.com/zh-CN/os-theme/docs/installation

# 安装UI库
npm i -D naive-ui
# 安装字体依赖
npm i -D vfonts

home.vue

about.vue

配置自动更新

重大问题
macos中需要设计到代码签名的问题始终无法解决，后续解决掉之后再更新此处。

自动更新实践。