Nuxt•9mo ago

404 error page don't work when project build.

Hello guys ! I have an issue with my error.vue & my apache server. On local when i try to go to an unexistant route, my error.vue is correctly rendered. BUT When i build on production using nuxt build command, when i try to go on an unexistant route i have the default apache page. This is my apache config :

<Virtualhost *:80>
    ServerName SERVER_NAME_HIDDEN
    RewriteEngine On
    RewriteCond %{HTTPS} off
    RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</VirtualHost>

<Virtualhost *:443>
    ServerName SERVER_NAME_HIDDEN
    SSLEngine on

     ProxyPreserveHost On

    ProxyPass / http://127.0.0.1:3001/
    ProxyPassReverse / http://127.0.0.1:3001/


    SSLCertificateFile /etc/letsencrypt/live/SERVER_NAME_HIDDEN/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/SERVER_NAME_HIDDEN/privkey.pem
    #SSLCertificateChainFile /etc/ssl/certs/SERVER_NAME_HIDDEN.fr.pem
    SSLVerifyClient None

</VirtualHost>

   # intermediate configuration, tweak to your needs
 SSLProtocol             all -SSLv3
 SSLHonorCipherOrder     on
 SSLCompression          off


 # OCSP Stapling, only in httpd 2.3.3 and later
 SSLUseStapling          on
 SSLStaplingResponderTimeout 5
 SSLStaplingReturnResponderErrors off
 SSLStaplingCache        shmcb:/var/run/ocsp(128000)

<Virtualhost *:80>
    ServerName SERVER_NAME_HIDDEN
    RewriteEngine On
    RewriteCond %{HTTPS} off
    RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</VirtualHost>

<Virtualhost *:443>
    ServerName SERVER_NAME_HIDDEN
    SSLEngine on

     ProxyPreserveHost On

    ProxyPass / http://127.0.0.1:3001/
    ProxyPassReverse / http://127.0.0.1:3001/


    SSLCertificateFile /etc/letsencrypt/live/SERVER_NAME_HIDDEN/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/SERVER_NAME_HIDDEN/privkey.pem
    #SSLCertificateChainFile /etc/ssl/certs/SERVER_NAME_HIDDEN.fr.pem
    SSLVerifyClient None

</VirtualHost>

   # intermediate configuration, tweak to your needs
 SSLProtocol             all -SSLv3
 SSLHonorCipherOrder     on
 SSLCompression          off


 # OCSP Stapling, only in httpd 2.3.3 and later
 SSLUseStapling          on
 SSLStaplingResponderTimeout 5
 SSLStaplingReturnResponderErrors off
 SSLStaplingCache        shmcb:/var/run/ocsp(128000)

This is my error.vue page (very easy one so i'm pretty sure is not the issue) :

<script setup lang="ts">
import Button from "~/components/UI/Button/Button.vue";
import Breadcrumb from "~/components/UI/General/Breadcrumb.vue";

const error = useError();
</script>

<template>
  <Navbar/>
  <div class="dark:bg-gray-900">


  <section class="container">
    <Breadcrumb :title="'Erreur ' + error.statusCode"/>
    <div class="flex items-center flex-col pt-16 lg:pt-24 lg:pb-24">
      <h1 class="text-purple-900 dark:text-purple-50 text-7xl lg:text-9xl font-extrabold leading-[128px]" v-html="error.statusCode"></h1>
      <h2 class="text-gray-800 dark:text-purple-300 text-4xl font-extrabold leading-[54px] pt-4 pb-8 text-center">Une erreur vient de survenir</h2>
      <p v-if="error.statusCode == 404" class="text-gray-500 text-lg leading-[27px] pb-8 text-center dark:text-gray-300">Désolé, nous ne trouvons pas cette page. Vous trouverez beaucoup de choses à explorer sur la page d'accueil.</p>
      <p v-if="error.statusCode == 500" class="text-gray-500 text-lg leading-[27px] pb-8 dark:text-gray-300">Désolé, une erreur est survenue. Merci de réessayer plus tard ! {{ error.message }}</p>
      <NuxtLink href="/"><Button>Retour à la page d’accueil</Button></NuxtLink>
    </div>
  </section>
  </div>
  <Footer/>
</template>

<style scoped>

</style>

<script setup lang="ts">
import Button from "~/components/UI/Button/Button.vue";
import Breadcrumb from "~/components/UI/General/Breadcrumb.vue";

const error = useError();
</script>

<template>
  <Navbar/>
  <div class="dark:bg-gray-900">


  <section class="container">
    <Breadcrumb :title="'Erreur ' + error.statusCode"/>
    <div class="flex items-center flex-col pt-16 lg:pt-24 lg:pb-24">
      <h1 class="text-purple-900 dark:text-purple-50 text-7xl lg:text-9xl font-extrabold leading-[128px]" v-html="error.statusCode"></h1>
      <h2 class="text-gray-800 dark:text-purple-300 text-4xl font-extrabold leading-[54px] pt-4 pb-8 text-center">Une erreur vient de survenir</h2>
      <p v-if="error.statusCode == 404" class="text-gray-500 text-lg leading-[27px] pb-8 text-center dark:text-gray-300">Désolé, nous ne trouvons pas cette page. Vous trouverez beaucoup de choses à explorer sur la page d'accueil.</p>
      <p v-if="error.statusCode == 500" class="text-gray-500 text-lg leading-[27px] pb-8 dark:text-gray-300">Désolé, une erreur est survenue. Merci de réessayer plus tard ! {{ error.message }}</p>
      <NuxtLink href="/"><Button>Retour à la page d’accueil</Button></NuxtLink>
    </div>
  </section>
  </div>
  <Footer/>
</template>

<style scoped>

</style>

Thanks in advance to everyone for your help !

1 Reply

Anto'OP•9mo ago

Just try to deploy on railway the project and it's work. So i'm 100% sure it's a apache 2 config miss Fixed by adding "ProxyErrorOverride Off" on my apache 2 config. https://httpd.apache.org/docs/2.4/mod/mod_proxy.html#proxyerroroverride Thanks to @flapili.fr - ugo.co (France) :OlyHug:

Gaming

Programming

404 error page don't work when project build.