R4A.10 - Compléments Web (vuejs)

Ensuite, il faut modifier le fichier de configuration de vite afin de paramétrer electron. Pour cela, il faut éditer le fichier vite.config.mjs (l'extension peut être .ts si projet en typescript) et le modifier comme suivant :

...
// adding electron-vite support
import electron from 'vite-plugin-electron/simple'
...
export default defineConfig( {
  plugins: [
     ...
    // electron config
    electron({
      main: {
        entry: 'electron/index.js',
        /* If needed, use onstart to define what to do before starting up the app
           In the present case, just display a message.
           NB: seems to only work in dev mode.
         */
        onstart({startup}) {
          console.log("starting app")
          startup()
        },
      },
    }),
    ...
  ],
  ...
})

Remarques :

• on peut mettre la configuration electron n'importe où dans le tableau plugins, par exemple juste après celle de vue.
• le fichier electron/index.js sert à vite-plugin-electron pour construire la fenêtre de l'application en mode dev, et définir certains comportement basiques de celle-ci. Ce fichier est également "transformé" pour en faire une version utilisée en mode production (cf. dernière étape)

Comme indiqué ci-dessus, il faut nécessairement fournir un fichier qui décrit comment construire la fenêtre principale de l'application. Pour écrire ce fichier, on peut se référer à la documentation de electron, mais le plus simple est de reprendre et modifier des exemples trouvés sur le net, qui conviennent généralement à tous les projets. Exemple possible (tiré de la démonstration) : index.js.

Cet exemple est un peu plus complexe que l'exemple de départ de la documentation electron. En effet, il permet de :

• différencier le mode de lancement de l'application (dev ou production),
• de permettre ou non l'utilisation de l'inspecteur (cf. options devTools) selon le mode d'exécution,
• d'éviter que des liens vers d'autres sites s'ouvrent directement dans la fenêtre principale (cf. gestionnaire d'événement will-navigate),
• de fermer correctement l'application,
• etc.

Les seules modifications à apporter pour une autre application sont essentiellement changer le titre et la dimension de la fenêtre.

Selon la configuration du projet, l'emplacement de ce fichier peut différer. Dans le cas présent, on a clairement indiqué à vite-plugin-electron que ce fichier se trouve dans electron/index.js. Il faut donc créer le répertoire à la racine du projet, puis créer index.js dedans.

Enfin, il faut modifier le fichier package.json en ajoutant un champ main, et en modifiant la valeur du champ build dans l'objet scripts, comme suivant :

{
  ...
  "main": "dist-electron/index.js"
  ...
  "scripts": {
    ...
    "build": "vite build && electron-builder",
    ...
  }
  ...
}

Le premier ajout permet d'indiquer à vite-plugin-electron où il doit déposer le fichier permettant de créer la fenêtre applicative en mode production (pour rappel : ce fichier est créé à partir de electron/index.js). Dans le cas présent, on le met dans dist-electron, pour que cela corresponde à la configuration de electron-builder.

Le deuxième modification permet simplement de lancer automatiquement electron-builder après avoir créé la version de production de l'application web. Cela évite de le faire manuellement.

const router = createRouter({
  history: process.env.IS_ELECTRON ? createWebHashHistory(import.meta.env.BASE_URL) : createWebHistory(import.meta.env.BASE_URL),
  routes: routes,
})

// SSL certificate error pass-through
app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
    if ( (VITE_DEV_SERVER_URL) && (url.startsWith("https://localhost:4567/") ) {
    event.preventDefault()
    callback(true)
  } else {
    callback(false)
  }
})