Servir sous un sous-dossier

La correction complète est dans code/ch11/exercices/ex11-sous-dossier/, servie par nginx dans Docker et ouverte dans Chromium à chaque étape.

• Avec base seul, Vite a bien réécrit les chemins de index.html, mais le routeur, lui, compare l'adresse entière /librairie/ à ses routes :

/librairie/ → h1 « Page introuvable »
/librairie/livres/9782956300052 → h1 « Page introuvable »
réponses en erreur : aucune

On lui donne la base, que Vite expose dans import.meta.env.BASE_URL :

// BASE_URL vaut la valeur de « base » dans vite.config.js : "/librairie/"
history: createWebHistory(import.meta.env.BASE_URL),

• Les couvertures sont désignées par '/' + livre.image, un chemin absolu qui ignore la base :

/librairie/ → h1 « Catalogue »
/librairie/livres/9782956300052 → h1 « Le Petit Prince »
réponses en erreur : 404 /images/analyse.svg, 404 /images/algo.svg, 404 /images/physique.svg, 404 /images/prince.svg, 404 /images/etranger.svg, 404 /images/java.svg

Dans CarteLivre.vue et PageLivre.vue :

// Les images de public/ sont servies sous la base de l'application.
const base = import.meta.env.BASE_URL;

et :src="base + livre.image". Résultat :

/librairie/ → h1 « Catalogue »
/librairie/livres/9782956300052 → h1 « Le Petit Prince »
réponses en erreur : aucune

Les appels à /api/…, eux, restent absolus : l'API n'est pas sous /librairie/.

• On copie dist dans le sous-dossier librairie de la racine du serveur, et la réécriture renvoie l'index.html de ce sous-dossier :

# La Librairie servie sous /librairie/ (dist/ copié dans html/librairie/).
server {
  listen 80;
  root /usr/share/nginx/html;

  location /librairie/assets/ {
    add_header Cache-Control "public, max-age=31536000, immutable";
    try_files $uri =404;
  }

  location /api/ {
    proxy_pass http://host.docker.internal:8000;
  }

  location /librairie/ {
    add_header Cache-Control "no-cache";
    try_files $uri $uri/ /librairie/index.html;
  }
}