Electron⚡️Vite

外观

本页面

功能特性 ​

所有 Electron⚡️Vite 功能都包含在一个基于 Vite 开发的 vite-plugin-electron 插件中，这使得用户可以轻松地在 Vite 项目中快速集成 Electron。

中文

Electron⚡️Vite 所有功能均包含在一个基于 Vite 开发的 vite-plugin-electron 插件，它能使得用户能很方便的在一个 Vite 项目中快速集成 Electron。

热重启 ​

默认情况下 vite-plugin-electron 已启用自动重启，它只需监听 Vite 构建完成后，杀死正在运行的 Electron App 进程，然后重启一个新的 Electron App 进程。

但是，您可以根据需要控制默认行为。

中文

默认情况下 vite-plugin-electron 开启了自动重启，它的工作原理仅仅是监听 Vite 构建完成后杀死正在运行的 Electron App 进程，然后重启一个新的Electron App 进程。

不过你可以随意控制默认行为。

ts
// vite.config.ts
import electron from 'vite-plugin-electron'

export default {
  plugins: [
    electron({
      // Main process entry file of the Electron App.
      entry: 'electron/main.ts',
      // If this `onstart` is passed, Electron App will not start automatically.  
      // However, you can start Electroo App via `startup` function. 
      onstart(args) {
        args.startup()
      },
    }),
  ],
}

热重载 ​

当预加载脚本被修改时，我们只需要刷新渲染进程即可。但我们需要显式地控制它，因为 Vite 不知道哪些代码是预加载脚本。这很简单！

中文

当预加载脚本被修改时，我们只需要重新刷新渲染进程就可以了，但是它需要我们显式的控制它，因为 Vite 不知道哪些代码是预加载脚本。它很简单！

ts
// vite.config.ts
import electron from 'vite-plugin-electron'

export default {
  plugins: [
    electron([
      {
        entry: 'electron/main/index.ts',
      },
      {
        // Preload scripts entry file of the Electron App.
        entry: 'electron/preload/index.ts',
        onstart(args) {
          // Notify the Renderer process to reload the page when the Preload scripts build is complete, 
          // instead of restarting the entire Electron App.
          args.reload()
        },
      }
    ]),
  ],
}

HMR ​

HMR 即渲染进程在代码修改后会热替换修改的部分，HMR 的开发体验非常棒！它基于 Vite 内置的 HMR，在开发期间主进程通过 process.env.VITE_DEV_SERVER_URL 环境变量启用它。

中文

HMR 即渲染进程修改代码后会热替换修改的部分，HMR 的开发体验非常棒！它基于 Vite 内置的 HMR，在开发期间主进程通过 process.env.VITE_DEV_SERVER_URL 环境变量开启它。

ts
// electron/main.ts
import { app, BrowserWindow } from 'electron'

app.whenReady().then(() => {
  const win = new BrowserWindow({
    title: 'Main window',
  })

  // You can use `process.env.VITE_DEV_SERVER_URL` when the vite command is called `serve`
  if (process.env.VITE_DEV_SERVER_URL) {
    win.loadURL(process.env.VITE_DEV_SERVER_URL)
  } else {
    // Load your file
    win.loadFile('dist/index.html');
  }
})