Electron 🔗 Vite
English | 简体中文
- 🚀 Fully compatible with Vite and Vite's ecosystem (Based on Vite)
- 🎭 Flexible configuration
- 🐣 Few APIs, easy to use
- 🔥 Hot restart
npm i vite-plugin-electron -D
vite.config.ts
import electron from 'vite-plugin-electron'
export default {
plugins: [
electron({
entry: 'electron/main.ts',
}),
],
}
You can use process.env.VITE_DEV_SERVER_URL
when the vite command is called 'serve'
// electron main.js
const win = new BrowserWindow({
title: 'Main window',
})
if (process.env.VITE_DEV_SERVER_URL) {
win.loadURL(process.env.VITE_DEV_SERVER_URL)
} else {
// load your file
win.loadFile('yourOutputFile.html');
}
electron(config: Configuration | Configuration[])
export interface Configuration {
/**
* Shortcut of `build.lib.entry`
*/
entry?: import('vite').LibraryOptions['entry']
vite?: import('vite').InlineConfig
/**
* Triggered when Vite is built every time -- `vite serve` command only.
*
* If this `onstart` is passed, Electron App will not start automatically.
* However, you can start Electroo App via `startup` function.
*/
onstart?: (this: import('rollup').PluginContext, options: {
/**
* Electron App startup function.
* It will mount the Electron App child-process to `process.electronApp`.
* @param argv default value `['.', '--no-sandbox']`
*/
startup: (argv?: string[]) => Promise<void>
/** Reload Electron-Renderer */
reload: () => void
}) => void
}
It just executes the electron .
command in the Vite build completion hook and then starts or restarts the Electron App.
Let's use the official template-vanilla-ts created based on create vite
as an example
+ ├─┬ electron
+ │ └── main.ts
├─┬ src
│ ├── main.ts
│ ├── style.css
│ └── vite-env.d.ts
├── .gitignore
├── favicon.svg
├── index.html
├── package.json
├── tsconfig.json
+ └── vite.config.ts
- 🚨 By default, the files in
electron
folder will be built into thedist-electron
- 🚨 Currently,
"type": "module"
is not supported in Electron - 🚨 In general, Vite may not correctly build Node.js packages, especially C/C++ native modules, but Vite can load them as external packages. So, put your Node.js package in
dependencies
. Unless you know how to properly build them with Vite.electron({ entry: 'electron/main.ts', vite: { build: { rollupOptions: { // Here are some C/C++ plugins that can't be built properly. external: [ 'serialport', 'sqlite3', ], }, }, }, }),