Electron+Vite：实现electron + vue3 + ts + pinia + vite高效跨平台开发指南

目标：electron + vue3 + ts + pinia + vite

简介

electron-vite 是一个新型构建工具，旨在为Electron提供更快、更精简的开发体验。它主要由五部分组成：

一套构建指令，它使用Vite打包你的代码，并且它能够处理 Electron 的独特环境，包括Node.js和浏览器环境。
集中配置主进程、渲染器和预加载脚本的 Vite 配置，并针对 Electron 的独特环境进行预配置。
为渲染器提供快速模块热替换（HMR）支持，为主进程和预加载脚本提供热重载支持，极大地提高了开发效率。
优化 Electron 主进程资源处理。
使用 V8 字节码保护源代码。

electron-vite 快速、简单且功能强大，旨在开箱即用。

安装

前提条件

electron-vite 需要 Node.js 版本 20.19+, 22.12+ 和 Vite 版本 5.0+

javascript 复制代码

npm i electron-vite -D

命令行界面

在安装了 electron-vite 的项目中，你可以直接使用 npx electron-vite 运行，也可以在 package.json 文件中添加 npm scripts：

javascript 复制代码

{
  "scripts": {
    "start": "electron-vite preview", // 开启 Electron 程序预览生产构建
    "dev": "electron-vite dev", // 开启开发服务和 Electron 程序
    "prebuild": "electron-vite build" // 为生产构建代码
  }
}

你还可以指定其他 CLI 选项，例如 --outDir。有关 CLI 选项的完整列表，可以在你的项目中运行 npx electron-vite -h。

配置 electron-vite

当以命令行方式运行 electron-vite 时，electron-vite 将会自动尝试解析项目根目录下名为 electron.vite.config.js 的配置文件。最基本的配置文件如下所示：

javascript 复制代码

// electron.vite.config.js
export default {
  main: {
    // vite config options
  },
  preload: {
    // vite config options
  },
  renderer: {
    // vite config options
  }
}

Electron 入口

当使用 electron-vite 打包代码时，Electron 应用程序的入口点应更改为输出目录中的主进程入口文件。默认的输出目录 outDir 为 out。你的 package.json 文件会是这样：

javascript 复制代码

{
  "name": "electron-app",
  "version": "1.0.0",
  "main": "./out/main/index.js"
}

Electron 的工作目录将是输出目录，而不是你的源代码目录。因此在打包 Electron 应用程序时可以将源代码排除。

搭建第一个 electron-vite 项目

在命令行中运行以下命令：

npm

javascript 复制代码

npm create @quick-start/electron@latest

yarn

javascript 复制代码

yarn create @quick-start/electron

pnpm

javascript 复制代码

pnpm create @quick-start/electron

然后按照提示操作即可!

javascript 复制代码

✔ Project name: ... <electron-app>
✔ Select a framework: › vue
✔ Add TypeScript? ... No / Yes
✔ Add Electron updater plugin? ... No / Yes
✔ Enable Electron download mirror proxy? ... No / Yes

Scaffolding project in ./<electron-app>...
Done.

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Electron + Vue 项目，运行:

javascript 复制代码

# npm 7+，需要添加额外的 --：
npm create @quick-start/electron@latest my-app -- --template vue

# yarn
yarn create @quick-start/electron my-app --template vue

# pnpm
pnpm create @quick-start/electron my-app --template vue

目前支持的模板预设如下：

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
svelte	svelte-ts
solid	solid-ts

克隆模板

create-electron 是一个快速生成主流 Electron 框架基础模板的工具。你还可以用如 degit 之类的工具，使用 electron-vite-boilerplate 模板来搭建项目。

javascript 复制代码

npx degit alex8088/electron-vite-boilerplate electron-app
cd electron-app

npm install
npm run dev

功能

Vite 支持

继承 Vite 的所有优点，使用方式与 Vite 相同。

完全构建

electron-vite 可以智能地为 Electron 的独特环境打包源代码。

主进程和预加载脚本： 无论是在开发还是生产中，这些都会被打包成 CommonJS 模块，并在 Node.js 环境中运行。
渲染器： 在开发过程中，electron-vite 会将 CommonJS / UMD 模块转换为 ES 模块以支持 HMR。在生产过程中，这些将被打包成 IIFE 模块，并在浏览器环境中运行。

集中配置和预设配置

当你使用 Vite 来打包你的 Electron 源代码时，项目结构可能是这样的：

复制代码

├──main
│  ├──...
│  └──vite.config.js
├──preload
│  ├──...
│  └──vite.config.js
└──renderer
   ├──...
   └──vite.config.js

而在 electron-vite 中，所有的 Vite 配置都合并到一个文件中。项目结构是这样的：

复制代码

├──src/
│  ├──main
│  ├──preload
│  └──renderer
├──electron.vite.config.js
└──package.json

此外，electron-vite 内置了很多配置，如outDir、target、entry、formats、external等，以此进行智能解析和配置检查。

渲染进程 HMR

得益于 Vite 极快的 HMR 功能，我们在渲染器开发中使用它。它将极大地提高 Electron 的开发效率。

热重载

热重载是指在主进程或预加载脚本模块发生变化时快速重新构建并重启 Electron 程序。事实上，并不是真正的热重载，而是类似的。它为开发者带来了很好的开发体验。

资源处理

除了像 Vite 一样支持 web 应用程序中的静态资源处理之外，electron-vite 还优化了 Electron 主进程中的资源处理。

Electron 的 ESM 支持

Electron 从 Electron 28 开始支持 ES 模块。 electron-vite（自 2.0 起）同样支持使用 ESM 来开发和构建你的 Electron 应用程序。

源代码保护

electron-vite 使用 V8 字节码来保护源代码。

TypeScript 装饰器

electron-vite 创建了一个可选的由 swc 驱动 swcPlugin 插件来替代 Vite 的 esbuild 插件以支持 TypeScript 装饰器。

Worker Threads

electron-vite 为 Electron 主进程提供 Node.js 工作线程支持。

调试

非常容易在 IDE 中调试，例如 vscode 或 webstorm。