Routing Vues.js et React.js Serveur Apache

Par défaut, Apache ne sait pas comment gérer les routes de votre application VueJS ou ReactJS et renvoie une erreur 404 lorsque vous essayez d'accéder directement à une route autre que la page d'accueil. Pour résoudre ce problème, vous devez configurer votre serveur Apache pour qu'il redirige toutes les requêtes vers le fichier index.html de votre application VueJS. Voici comment vous pouvez procéder :

1. Créer un fichier .htaccess : Ce fichier permet de configurer Apache pour rediriger toutes les requêtes vers index.html, sauf celles visant des fichiers ou des répertoires existants.

   <IfModule mod_rewrite.c>
       RewriteEngine On
       RewriteBase /
       RewriteRule ^index\.html$ - [L]
       RewriteCond %{REQUEST_FILENAME} !-f
       RewriteCond %{REQUEST_FILENAME} !-d
       RewriteRule . /index.html [L]
   </IfModule>
   

2. Placer le fichier .htaccess à la racine de votre projet VueJS : À côté de votre index.html.
3. Ajouter les directives nécessaires dans le fichier .htaccess : (pas nécessaire sur Plesk)

Ces directives font les choses suivantes :

• RewriteEngine On : Active le moteur de réécriture.
• RewriteBase / : Définit la base de l'URL utilisée pour la réécriture.
• RewriteRule ^index\.html$ - [L] : Si l'URL demandée est index.html, ne rien faire (le laisser tel quel).
• RewriteCond %{REQUEST_FILENAME} !-f : Si le fichier demandé n'existe pas...
• RewriteCond %{REQUEST_FILENAME} !-d : ... et si le répertoire demandé n'existe pas...
• RewriteRule . /index.html [L] : ... alors rediriger la demande vers index.html.

1. Activer le module mod_rewrite d’Apache (si ce n'est pas déjà fait) : Pour cela, vous devrez vous assurer que le module mod_rewrite est activé. Vous pouvez le faire via l'interface de gestion de Plesk ou en accédant à la configuration Apache si vous avez les privilèges nécessaires. Voici une commande que vous pouvez utiliser si vous avez accès au terminal :

Une fois ces étapes terminées, Apache redirigera toutes les requêtes vers index.html, permettant à votre application VueJS de gérer les routes côté client comme prévu.