基于electron+vue3+ts搭建桌面端应用并且可以热更新
- 发布日期：2025-01-04 10:38 点击次数：80
技术
字体加黑的是必要的技术，其他的库是可以自由选择的
electron 13.0.0vue3 + tselectron-updaternode 16.13.1element-pluslessmeansjs
搭建vue3项目
安装vue-cli
如果有没有安装的话就全局安装
npm install -g @vue/cli
创建vue3项目
跟vue2创建项目差不多，需要配置什么自己去选择，这儿我选择的是ts开发
vue create electron-vue3
启动项目：
yarn serve
启动成功以后，开始安装electron；
安装Electron
electron-builder官方文档
在此安装的时候会叫你选择版本，你根据自己的要求选择就可（我的是13.0.0）
安装依赖：
vue add electron-builder
启动项目：
yarn electron:serve
在以上的安装过程中，electron的版本只能是11、12、13；如果你想要更高版本electron的可以在此安装一下electron，这样将会更新到最新版本的electron（注：2023-6-2更新）
yarn add --dev electron // ornpm install --save-dev electron // orpnpm add --save-dev electron // or
我们在启动的时候会报错如下图：
解决方案：
安装:
yarn add [email protected]
找到background.ts文件，将e修改
然后再次启动即可，在启动的过程中有点慢，需要耐心等待；后续我会说怎么解决
background.ts文件修改
创建主进程文件
在src随意位置创建一个host文件，可以在common文件中随意封装很多文件然后再host/index.ts文件中引入使用即可
修改background.ts
由于太多了,不好描述我就直接贴上代码了,代码中有注释大家也可以查看;还有就是我们在上面说到的,项目启动很慢的问题,在这而也是得到了解决的；
大致讲解
hout/index文件是一个主进程接收发送文件await installExtension(VUEJS3_DEVTOOLS)替换成session.defaultSession.loadExtension( path.resolve(__dirname, "../devTools/chrome"))；会提高启动速度，至于为什么请自行百度其他的new BrowserWindow参数做了一些调整，就没怎么修改了；好理解
当你做到这儿的时候，你的启动速度会贼快
然后我们开始配置vue.config.js；打包的時候需要的
vue.config.js
这里的配置文件我是根据初始化项目来进行配置的，如果你的项目没有去修改初始文件的名称的话；可将以下代码复制进去即可。代码中我都写了注释的，大家需要修改什么地方自己更改就好
注意的地方（重点）：
appIdiconguidinclude
1、appId/guid需保持一致；
2、include重点中的重点，如果你需要热更新的话；这个文件一定要配置，不然你在卸载/更新后安装软件安装不上；主要原因注册机的问题。这个文件最有一句代码也是要和appId一致的；
根目录创建installer.nsh文件
!macro customInitDeleteRegKey HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\com.zhuhong.vue3"!macroend
打包:
yarn electron:build
如果配置到这儿打包没得问题,那么你的项目基本上就行了;
最后呢?就是热更新了;需要的可以继续往下看
热更新
安装
yarn add electron-updater
新建JSPatch文件
注意:
autoUpdater.setFeedURL一定要写在外面，不然打包的时候会报错url: process.env.VUE_APP_HOT_UPDATE, 不能这样使用；否则打包也会报错url链接地址事你存放打包文件的地址需要将此文件引入background.ts文件中必须在app.on('ready', 函数中引用
新建一个组件或者在app.vue中使用也可以jspatch
最后修改一哈vue.config.js就完成了
将以下代码复制到vue.config.js的builderOptions对象中即可
然后再次打包安装测试；没有问题就可以上线了
也可以查看线上代码
json-tool工具GitHub仓库
下载依赖问题
如果你在下载依赖很慢的情况下，在.npmrc文件中配置以下文件，基本上配置了都能下载成功。
以上就是基于electron+vue3+ts搭建桌面端应用并且可以热更新的详细内容，更多关于electron+vue3+ts搭建桌面应用的资料请关注脚本之家其它相关文章！
