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. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent se référer à

vue-router. Mode de hachage de données par défaut : utilise le hachage d'URL pour simuler une URL complète. Ainsi, lorsque l'URL change, la page ne se recharge pas.

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 La configuration dans nginx 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, alors 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

Projet A

http://yoursite.com/A

Projet B

http://yoursite.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 : Notez que vous avez besoin utiliser un alias et non un root

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment vue résout le problème de l'échec de l'actualisation après que addRoutes ajoute dynamiquement des routes

Vue iview-admin framework Comment changer le menu de deuxième niveau en menu de troisième niveau

Configuration|Méthode de configuration d'électron+vue+ts+sqlite

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!