Creación del proyecto base con Vue 3

Para comenzar, es necesario generar un proyecto base utilizando Vite y Vue 3. Esto se logra ejecutando el siguiente comando en la terminal:

npm create vite@latest mi-app -- --template vue-ts
cd mi-app
npm install

Integración de Electron y configuración de Vite

A continuación, se instalan las dependencias necesarias para ejecutar Electron junto con el entorno de desarrollo de Vite:

npm install electron vite-plugin-electron -D

Se debe crear un directorio llamado src-electron en la raíz del proyecto y dentro de él un archivo main.ts. Posteriormente, se actualiza el archivo vite.config.ts para incluir el plugin de Electron:

// vite.config.ts
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.ts',
    }),
  ],
});

El código del proceso principal de Electron se define en src-electron/main.ts. Aquí se configura la ventana principal y se manejan los entornos de desarrollo y producción:

// src-electron/main.ts
import { app, BrowserWindow } from 'electron';
import * as path from 'path';

let mainWindow: BrowserWindow | null = null;

function bootstrapApp() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      devTools: process.env.NODE_ENV === 'development',
    },
  });

  const isDevEnvironment = process.env.NODE_ENV === 'development';
  
  if (isDevEnvironment && process.env['VITE_DEV_SERVER_URL']) {
    mainWindow.loadURL(process.env['VITE_DEV_SERVER_URL']);
  } else {
    mainWindow.loadFile(path.join(__dirname, '../dist/index.html'));
  }
}

app.whenReady().then(bootstrapApp);

Para que Electron identifique el punto de entrada compilado, es obligatorio añadir el campo main en el package.json:

{
  "name": "mi-app",
  "version": "1.0.0",
  "main": "dist-electron/main.js"
}

Empaquetado y distribución con electron-builder

Para generar los instaladores nativos para diferentes sistemas operativos, se utiliza electron-builder:

npm install electron-builder -D

Se añade un nuevo script en la sección scripts y se configura el objeto build dentro del package.json:

{
  "scripts": {
    "build:desktop": "vite build && electron-builder"
  },
  "build": {
    "appId": "com.empresa.miapp",
    "productName": "MiAplicacion",
    "asar": true,
    "directories": {
      "output": "release-builds"
    },
    "files": [
      "dist/**/*",
      "dist-electron/**/*"
    ],
    "mac": {
      "target": ["dmg"],
      "artifactName": "${productName}-macOS-${version}.${ext}"
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": ["x64"]
        }
      ],
      "artifactName": "${productName}-Windows-${version}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": true,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": true
    }
  }
}

Personalización del instalador NSIS para Windows

El bloque nsis permite ajustar el comportamiento del instalador en Windows. A continuación, se detallan las propiedades más relevantes:

• oneClick: Determina si la instalación se ejecuta auttomáticmaente o muestra un asistente paso a paso.
• allowElevation: Indica si el instalador puede solicitar permisos de administrador.
• allowToChangeInstallationDirectory: Permite al usuario seleccionar una ruta de instalación personalizada (requiere oneClick: false).
• installerIcon y uninstallerIcon: Rutas hacia los archivos .ico que se mostrarán en los ejecutables.
• createDesktopShortcut y createStartMenuShortcut: Controlan la generación de accesos directos en el escritorio y en el menú de inicio.
• deleteAppDataOnUninstall: Especifica si los datos locales de la aplicación deben eliminarse durante el proceso de desinstalación.
• include o script: Permiten inyectar scripts personalizados de NSIS para tareas avanzadas, como la modificación del registro de Windows.

Compilación final

Una vez completada la configuración, el binario de la aplicación se genera ejecutando el script definido previamente:

npm run build:desktop