Develop and build electron project with vite and vue3


Develop and build electron project with vite and vue3


$ yarn create vite-app project-name
$ cd project-name
$ yarn add vitetron --dev
$ yarn add electron --dev
$ yarn add electron-builder --dev
$ yarn add esbuild --dev

Add background.ts at the ./src folder

Set the file’s content with:

import { app, BrowserWindow } from "electron";
let win;
app.on("ready", () => {
  win = new BrowserWindow();
  vitetron.load(win, "index.html"); //vitetron will be injected automaticly.

add scripts to your package.json

  "scripts": {
    "start": "vitetron start",
    "release": "vitetron release"

run yarn start to develope,yarn release for build


Add vitetron.config.js at the root of the project

Set the file’s content with

module.exports = {
  main: "./src/background.ts",
  build: {
    appId: "",
    productName: "ViteElectron示例",
  env: {
    dev: {
    test: {
    release: {


The entry file of the main process,.js and .ts file are supported


The electron-builder’s config

Do not set directories for the config


The customized definition of process.env


The main process can be debugged

Vitetron has TS types

What dependencies does vue-cli remove

Test the main process entry program containing external references

Supports .js and .ts entry files by default

Try to install all the libraries you need

Create script commands automatically

test on mac

Pass additional parameters to electron at startup

How to compile the injected script

Shake win.loadURL to a branch

Download Details:

Author: xland

Source Code:

#vuejs #vue #javascript

Develop and build electron project with vite and vue3
40.45 GEEK