Step-by-Step Guide to Building and Packaging an Electron Desktop Application with Vue 3 and Vite

Electron is built on Chromium and Node.js, allowing front‑end developers to create cross‑platform desktop applications with JavaScript, HTML, and CSS. The author documents the process of learning Electron, creating a tool, and packaging it for Windows, macOS, and Linux.

Project Creation

First, a Vue 3 project is generated with Vite, then Electron is added.

npm create vite@latest electron-desktop-tool

After installing dependencies and running the development server, the Vue app runs in the browser, confirming the setup.

cd electron-desktop-tool
npm install
npm run dev

Installing Electron

A .npmrc file is created at the project root to configure mirrors and disable strict SSL:

strict-ssl=false
registry=https://registry.npmmirror.com/
electron_mirror=https://registry.npmmirror.com/-/binary/electron/
electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/

strict-ssl=false disables SSL certificate verification.

registry=... sets the npm mirror.

electron_mirror=... sets the Electron binary source.

Installing Electron and Related Plugins

// Install Electron
npm install -D electron

// Install electron-builder for packaging
npm install -D electron-builder

// Install devtools installer for debugging
npm install -D electron-devtools-installer

// Vite plugin for Electron
npm install -D vite-plugin-electron

Main Process Entry

A new folder src-electron is created with main.ts (or main.js ) containing the Electron main process code.

const { app, BrowserWindow } = require('electron')
const { join } = require('path')
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    title: 'My Electron App',
    icon: join(__dirname, '../public/logo.ico')
  })
  if (process.env.VITE_DEV_SERVER_URL) {
    win.loadURL(process.env.VITE_DEV_SERVER_URL)
    win.webContents.openDevTools()
  } else {
    win.loadFile(join(__dirname, '../dist/index.html'))
  }
}

app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

Vite Plugin Configuration

The vite.config.ts file is updated to include vite-plugin-electron :

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'

export default defineConfig({
  plugins: [
    vue(),
    electron({
      entry: './src-electron/main.js'
    })
  ],
  server: {
    port: 3000
  }
})

package.json Adjustments

The type: "module" field is removed and a main field pointing to the Electron entry file is added.

"main": "./src-electron/main.js",

Build scripts are added:

"electron:build": "vite build && electron-builder"

Packaging Configuration

The build section of package.json defines product name, app ID, compression, ASAR, output directory, and platform‑specific settings.

"build": {
  "productName": "ElectronDeskTopTool",
  "appId": "dyy.dongyuanwai",
  "copyright": "dyy.dongyuanwai © 2024",
  "compression": "maximum",
  "asar": true,
  "directories": { "output": "release/" },
  "nsis": {
    "oneClick": false,
    "allowToChangeInstallationDirectory": true,
    "perMachine": true,
    "deleteAppDataOnUninstall": true,
    "createDesktopShortcut": true,
    "createStartMenuShortcut": true,
    "shortcutName": "ElectronDeskTopTool"
  },
  "win": {
    "icon": "./public/logo.ico",
    "artifactName": "${productName}-v${version}-${platform}-setup.${ext}",
    "target": [{ "target": "nsis" }]
  },
  "mac": {
    "icon": "./public/logo.ico",
    "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
  },
  "linux": {
    "icon": "./public/logo.ico",
    "artifactName": "${productName}-v${version}-${platform}-setup.${ext}",
    "target": ["deb"]
  }
}

Running npm run electron:build produces installers in the release folder. The NSIS options allow custom installation directories, desktop shortcuts, and start‑menu shortcuts.

Router Configuration (Vue)

Even though the app runs inside Electron, routing is set up like a normal Vue project.

npm install vue-router@4

Pages are placed under src/page (e.g., first and second ), and a router file src/router/index.ts defines hash‑mode routes.

// src/router/index.ts
import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/', component: () => import('../page/first/index.vue') },
    { path: '/second', component: () => import('../page/second/index.vue') }
  ]
})
export default router

The main Vue entry src/main.ts mounts the router, and App.vue contains a <router-view/> placeholder.

Final Remarks

The author notes future updates will cover IPC communication, macOS packaging, and more, with all code hosted on GitHub at electron-desktop-tool .