1， 使用vite 构建 VUE 项目

输入项目名，选择VUE3和TypeScript

按照提示执行，最后可以在浏览器打开网页即可。

(资料图)

2，安装electron

在    lx-desk-desktop下创建 electron/index.ts 和 electron/preload.ts

修改 vite.config.ts 配置文件

引入electron插件配置entry对应electron的main文件和预加载脚本。

编写代码 electron / index.ts

修改package.json，新增 "main": "dist-electron/index.js"，去掉 "type"。

运行 npm run dev，出现如下画面表示成功。

3，打包electron

安装 electron-builder

package json 配置 build 修改npm run build命令，这里dev 加了 "chcp 65001" 为了防止后台面板显示中文乱码。

build 的 files 中要加dist和dist-electron，dist是build vue文件的结果。dist-electron是build electron下面的文件的结果。

npm run build，release下面出现打包的exe文件表示成功。

4，进程通信

为了更好展示主进程和渲染进程之间的消息通信，把 App.vue和HelloWorld.vue 进行改造。

App.vue

HelloWorld.vue

如下图所示，我们主要实现获取预加载脚本中的数据，渲染进程给主进程发送数据，主进程给渲染进程发送数据三个功能。

获取预加载脚本中的环境变量

修改预加载脚本，electron/preload.ts

为了使渲染进程中的脚本能够使用预加载脚本中的接口，需要定义一个全局数据脚本。

创建 src/global.d.ts

在 HelloWorld.vue的 script下给 platform 变量赋值。

渲染进程给主进程发送消息

在 preload.ts主加入ipcRender。

在 HelloWorld.vue 的script中加入发送函数。

在 electron/index.ts写接收函数

点击发送按钮，主进程收到消息打印日志

主进程给渲染进程发送消息

在 preload.ts 加入ipcRender回调函数。

在 electron/index.ts收到渲染进程消息时给渲染进程发送消息

HelloWorld.vue中写接收回调函数

最后三个消息都响应成功。

关键词： ELECTRON TypeScript Release MAIN BUILD TYPE