技术栈：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 提供更快、更精简的开发体验。
三种构建方式：

1. 命令行创建yarn create @quick-start/electron，一步一步填写项目名称、选择模版等
2. 命令行创建并指定模板yarn create @quick-start/electron electron-app --template vue
   模板可选以下内容：

3. 在已有项目中添加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依赖。