À propos de la méthode de configuration du chemin non racine vue-router+nginx

Cet article présente principalement la méthode de configuration du chemin non root vue-router+nginx. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Mode de hachage de données par défaut de vue-router - utilise le hachage d'URL pour simuler une URL complète, ainsi lorsque l'URL change, la page ne sera pas rechargée.

En général, nous n'aimons pas les hachages laids. Semblable à index.html#/matchResult, vous pouvez utiliser le mode historique de routage. Le mode Historique utilise l'API history.pushState pour implémenter les sauts de page.

Mais il y a un problème lors de l'utilisation de nginx, nous devons ajouter quelques configurations.

Configurez directement sous le chemin racine

Configurez directement sous le chemin racine Lors de l'accès, entrez simplement http://votresite.com, dans nginx The. la configuration est la suivante

location / {
 try_files $uri $uri/ /index.html;
}

Configuration du chemin non racine

S'il y a plusieurs projets sous un nom de domaine, il n'est pas approprié d'utiliser la configuration du chemin racine. Nous devons spécifier une couche de chemins sous le chemin racine, par exemple

Un projet

http://votresite.com/A

Projet B

http://votresite.com/B

configuration nginx

  location ^~/A {
      alias /XX/A;//此处为A的路径
      index index.html;
      try_files $uri $uri/ /A/index.html;
  }
  location ^~/B {
      alias /XX/B;//此处为B的路径
      index index.html;
      try_files $uri $uri/ /B/index.html;
  }

astuce : Attention à utiliser alias et non root

Ce qui précède est L'ensemble du contenu de cet article devrait être utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction au processus de construction, de packaging et de publication des projets vue

À propos de vue v-model Introduction à la génération dynamique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!