快速开始

总览

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

• 一套构建指令，它使用 Vite 打包你的代码，并且它能够处理 Electron 的独特环境，包括 Node.js 和浏览器环境。

• 集中配置主进程、渲染器和预加载脚本的 Vite 配置，并针对 Electron 的独特环境进行预配置。

• 为渲染器提供快速模块热替换（HMR）支持，为主进程和预加载脚本提供热重载支持，极大地提高了开发效率。

• 优化 Electron 主进程资源处理。

• 使用 V8 字节码保护源代码。

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

你可以在 简介 中了解更多关于项目的设计初衷。

安装

前提条件

electron-vite 需要 Node.js 版本 18+，20+ 和 Vite 版本 4.0+

npm i electron-vite -D

npm i electron-vite -D

命令行界面

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

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

{
  "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 的配置文件。最基本的配置文件如下所示：

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

// 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 文件会是这样：

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

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

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

了解更多有关 生产构建 的信息。

搭建第一个 electron-vite 项目

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

npm

npm create @quick-start/electron@latest

npm create @quick-start/electron@latest

yarn

yarn create @quick-start/electron

yarn create @quick-start/electron

pnpm

pnpm create @quick-start/electron

pnpm create @quick-start/electron

然后按照提示操作即可!

✔ 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.

✔ 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 项目，运行:

# npm 6.x
npm create @quick-start/electron my-app --template vue

# npm 7+, extra double-dash is needed:
npm create @quick-start/electron my-app -- --template vue

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

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

# npm 6.x
npm create @quick-start/electron my-app --template vue

# npm 7+, extra double-dash is needed:
npm create @quick-start/electron 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 的信息。

克隆模板

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

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

npm install
npm run dev

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

npm install
npm run dev

寻求帮助

如果你在开发过程中遇到 electron-vite 的疑难问题，你可以去 GitHub issue tracker 查看是否有人已经遇到相同的问题。如果没有，欢迎提交 issue 到 github。