Come risolvere l’errore 404 dopo la build di Quasar SPA

Come risolvere l’errore 404 dopo la build di Quasar SPA

Se stai sviluppando un’applicazione con Quasar e, dopo aver effettuato la build, ricevi un errore 404 quando provi ad accedere a un percorso diverso dalla home (es. /login), significa che il server non sta gestendo correttamente il routing della tua Single Page Application (SPA).

Perché succede?

Durante lo sviluppo, Quasar utilizza un server di sviluppo che intercetta le richieste e le gestisce con il router di Vue.js. Tuttavia, dopo la build, l’app viene servita come file statico e alcuni server non riconoscono le route definite nel frontend, cercando file inesistenti.

Come risolvere l’errore 404 dopo la build di Quasar SPA: Soluzione con serve

Un metodo semplice ed efficace per servire correttamente la tua SPA è utilizzare il pacchetto serve, che gestisce il fallback automatico verso index.html. Ecco come fare:

1. Installa serve (se non lo hai già)

npm install -g serve

2. Avvia il server con fallback

npx serve -s C:/NodeJS/dist/spa -l 4000

L’opzione -s assicura che tutte le richieste siano reindirizzate a index.html, permettendo al router di Vue.js di gestire correttamente le route.

Come risolvere l’errore 404 dopo la build di Quasar SPA: Alternative

Se preferisci usare altri server, ecco alcune alternative:

1. http-server con fallback (potrebbe non funzionare sempre)

npx http-server C:/NodeJS/dist/spa -p 4000 --spa

Se il problema persiste, prova serve, che è più affidabile.

2. live-server

npx live-server C:/NodeJS/dist/spa --port=4000 --entry-file=index.html

Questa opzione forza tutte le richieste a passare da index.html, rendendo il routing funzionante.

3. Configurare un server web (Apache/Nginx)

Se stai distribuendo l’app su un server web, puoi configurare Apache o Nginx per gestire correttamente il routing delle SPA.

Apache (.htaccess)

Se il tuo sito è ospitato su Apache, crea un file .htaccess nella cartella dist/spa con il seguente contenuto:

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

Nginx (configurazione personalizzata)

Se usi Nginx, puoi aggiungere questa configurazione nel tuo file di configurazione:

location / {
    root /percorso/della/tua/spa;
    index index.html;
    try_files $uri /index.html;
}

Questo fa in modo che tutte le richieste vengano reindirizzate a index.html, permettendo al router di Vue.js di gestirle.

Conclusione

Se riscontri un errore 404 dopo la build di Quasar, il problema è dovuto alla mancata gestione delle route da parte del server. Usare serve è la soluzione più veloce ed efficace, ma se stai distribuendo l’app su un server web, considera la configurazione di Apache o Nginx per una gestione ottimale del routing.

 

Pubblicità