Develop and build electron project with vite and vue3

vitetron

Install

$ 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

Config

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

Set the file’s content with

module.exports = {
  main: "./src/background.ts",
  build: {
    appId: "com.xland.app",
    productName: "ViteElectron示例",
  },
  env: {
    dev: {
      SERVICE_BASE_URL: "https://dev.yourdomain.site",
    },
    test: {
      SERVICE_BASE_URL: "https://test.yourdomain.site",
    },
    release: {
      SERVICE_BASE_URL: "https://release.yourdomain.site",
    },
  },
};

main

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

build

The electron-builder’s config

Do not set directories for the config

env

The customized definition of process.env

all:

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: https://github.com/xland/vitetron

#vuejs #vue #javascript