Ce guide détaille le processus d'empaquetage d'une application Vue 3 en un programme exécutable pour Windows en utilisant Electron.

Configuration d'Electron

1. Installation d'Electron

Ajoutez Electron comme dépendance de développement à votre projet.

# Avec npm
npm install --save-dev electron

# Avec yarn
yarn add --dev electron

2. Installation d'electron-packager

Instlalez le package nécesaire pour créer des exécutables.

# Avec npm
npm install electron-packager --save-dev

# Avec yarn
yarn add electron-packager --dev

3. Configuration du fichier package.json

Mettez à jour votre fichier package.json pour inclure les scripts de lancement et de packaging.

{
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "pack": "electron-packager . --overwrite"
  }
}

4. Création du script de préchargement (preload.js)

Ce script s'exécute avant le chargement du processus de rendu et a accès à la fois à l'environnement du navigateur et à l'environnement Node.js. Il sera attaché au processus de rendu dans main.js.

// main.js importera ce script et le liera au processus de rendu
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector);
    if (element) element.innerText = text;
  };

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type]);
  }
});

5. Création du fichier du processus principal (main.js)

Ce fichier est le point d'entrée de votre application Electron. Il gère le processus principal, le cycle de vie de l'application, la création de fenêtres natives, et interagit avec les processus de rendu.

const { app, BrowserWindow, Menu } = require('electron/main');
const path = require('node:path');

// Définir un ID unique pour l'application (important pour Windows)
app.setAppUserModelId('MonApplicationVue');

// Chemin vers l'icône de l'application pour Windows
const appIcon = 'public/favicon.ico';

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // Lier le script de préchargement
      preload: path.join(__dirname, 'preload.js'),
      // Si vous avez des problèmes de sécurité, considérez nodeIntegration: false
      // et activez les contextes d'isolation si nécessaire.
    },
    icon: appIcon, // Appliquer l'icône
  });

  // Supprimer le menu par défaut d'Electron
  Menu.setApplicationMenu(null);

  // Charger le fichier index.html de votre build Vue
  // Assurez-vous que le chemin est correct après le build de Vue
  win.loadFile('dist/index.html');

  // Ouvrir les outils de développement pour le débogage
  win.webContents.openDevTools();
}

// Prêt à créer la fenêtre de l'application
app.whenReady().then(() => {
  createWindow();

  // Sur macOS, recréer une fenêtre si l'icône du dock est cliquée et qu'il n'y a pas de fenêtres ouvertes.
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

// Fermer l'application lorsque toutes les fenêtres sont fermées (sauf sur macOS)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

Résolution des Problèmes Courants

1. Configuration du Chemin de Base de l'Application

Dans la configuration de votre build Vue (par exemple, dans vue.config.js ou vite.config.js), assurez-vous que le chemin de base est correctement défini pour un accès local.

• Utilisez base: '/' si l'application est déployée à la racine d'un serveur.
• Utilisez base: './' si vous accédez directement au fichier index.html localement après le build. C'est généralement le cas pour les applications Electron locales.

2. Gestion des Tokens et des Requêtes API

Assurez-vous que la logique de gestion des tokens et des appels d'API est fonctionnelle dans l'environnement Electron. Les requêtes doivent utiliser des URLs complètes, par exemple : http://adresse-ip:port.

3. Ordre des Opérations : Build puis Run/Pack

Il est crucial de d'abord construire votre application Vue (npm run build ou yarn build) pour générer le répertoire dist, puis d'exécuter les commandes Electron :

• npm run start ou yarn start pour lancer l'application en développement.
• npm run pack ou yarn pack pour créer l'exécutable.

Des problèmes tels que des ressources inaccessibles (CSS, images) ou des erreurs de méthodes peuvent survenir après le packaging. Utilisez les outils de développemant d'Electron pour diagnostiquer et résoudre ces problèmes.