技术栈：electron v28.2.1、react v18.2.0
构建工具：electron-vite v2.0.0
项目打包：electron-builder v24.9.1
本教程为项目工程的搭建，相关技术的知识请各自学习。
Vite在当下绝对是非常卓越的前端构建工具，很多项目将其与Electron进行结合，开发桌面应用。但是如果单独配置vite进行桌面应用的开发，配置相当繁琐、复杂，甚至需要安装第三方库来解决一些常见问题，例如需安装nodemon来使electron应用热更新；当应用打包时，需要编写配置文件，指定打包文件的输出路径；当需要与Vue、React、Svelte结合开发时，也需要进行不同的配置处理等等。甚至是应用安全方面，electron使用js构建桌面应用，这很容易对应用程序进行解包、修改逻辑破解商业化限制、重新打包，再重新分发破解版，无法保护应用的安全。
为解决以上问题，electron-vite诞生了，为 Electron 提供更快、更精简的开发体验。
三种构建方式：
- 命令行创建
yarn create @quick-start/electron，一步一步填写项目名称、选择模版等 - 命令行创建并指定模板
yarn create @quick-start/electron electron-app --template vue
模板可选以下内容：
- 在已有项目中添加
electron-vite
前两种方式是比较简单的，主要讲解一下第三种方式，在已有的项目中添加。以react+ts项目为例：
第一步：安装electron-vite
yarn add --dev electron-vite
第二步：在项目根目录，创建 electron.vite.config.ts
当以命令行方式运行 electron-vite 时，electron-vite 将会自动尝试解析项目根目录下名为 electron.vite.config.js 的配置文件。
此文件的写法与vite.config.ts类似，你可以将原配置代码移植到electron.vite配置文件中，其完全兼容vite.config.ts。
基本结构：
import { defineConfig, externalizeDepsPlugin } from "electron-vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";export default defineConfig({main: {plugins: [externalizeDepsPlugin()]},preload: {plugins: [externalizeDepsPlugin()]},renderer: {resolve: {alias: {'@': resolve('src/renderer/src')}},plugins: [react()]}
})第三步：修改项目目录结构
将你的项目代码移植到src/renderer目录下。
├──src/
│ ├──main // 主进程下面包含index.ts 创建窗口等内容
│ ├──preload // 预加载脚本
│ └──renderer // 渲染进程，将你的原项目代码移植到此目录下
│ ├──index.html
│ └──src/
├──electron.vite.config.ts
└──package.json
electron-vite 内置了很多配置，如outDir、target、entry、formats、external等，以此进行智能解析和配置检查。所以只要保证目录结构的正确，你无需多进行复杂的配置，当然你也可以不按照此目录结构，自己进行配置。
第四步：编写启动脚本及指定入口文件
当使用 electron-vite 打包代码时，Electron 应用程序的入口点应更改为输出目录中的主进程入口文件。默认的输出目录 outDir 为 out。
"main": "./out/main/index.js",
"scripts": {"dev": "electron-vite dev --watch","build": "electron-vite build","build:win": "yarn build && electron-builder --win","build:mac": "electron-vite build && electron-builder --mac","build:linux": "electron-vite build && electron-builder --linux"
},
如需打包，请安装electron-builder依赖。
