Electron-1 electorn + vue3 + vite项目搭建,使用Electron-vite构建工具

1.创建项目存在的问题

• 使用框架 : 现有的构建插件，使用也不错，但是封装过的，且各个版本不统一，想修改时会出现各种问题
  比较不错的有如下几个
  https://cn.electron-vite.org/guide/
  https://www.electronforge.io/templates/vite-±typescript
  https://electron-vite.github.io/

• 从零开始搭建一个
  问题： 对前端不熟悉的人来说这可能无处下手
  解决： 有前辈开路，我们只需照猫画虎，从简单使用到多类型整合，由简到难层层递进非常详细，这里附上其博客地址
  https://blog.csdn.net/qq_39505245/category_12620548.html?spm=1001.2014.3001.5482

注意问题： electron打包时会将整个工程打包到resource/app中，而且程序运行时主进程应用路径就是这个app路径，所以在主进程使用相对路径时注意路径是否正确。还有electron如果使用ts的话最终是以编译后的js文件为基准。

Electron vite vue3 TS Electron ElectronForge 开发项目搭建

1.说明

• 开发幻境一键打包
• 支持electron 和 vue 热更新
• 一键打包

2.使用

• 安装： npm install
• 开发运行： npm run dev
• 打包： npm run build

3.项目介绍

• src: vue工程, 结构保持vue一致即可
• electron: electron 文件，包含主进程入口和其他ts文件， 及预加载文件等
  • electronMain: 主进程文件
• plugins：自定义的开发环境和生产环境vite插件
• environmentconfig： 项目的相关配置，环境变量等
• viteconfig： vite 配置，基础，开发，生产环境配置，最后加载用来确定和区分环境
• electronbuild： 运行打包时中间目录，为了暂存electron ts 编译后的js, 完成后在项目运行时会将其复制到 build 目录下
• out： forge 打包后输出目录

4. 开发环境搭建说明

4.1 主要流程

- 利用vite钩子函数，在vue项目启动完成后使用子进程调起electron服务，同时将vite服务地址传到electron主进程文件中，electron加载服务地址实现一键启动。
- electron 不支持ts，使用ts的话需要在electron启动前编译
- 监听 electron下的文件变化实现electron动态更新
- 打包也相同，等vue打包完成后进行electronMain.ts编译, 调起electron-forge 打包

项目地址：https://gitcode.com/CodingBinary/Electron-Vite-Vue3-TS-Electron-Forge-template/overview