Comment résoudre le problème de la page vide après le package du mode Historique de routage sous Vue

Cet article présente principalement la page blanche après que le mode Historique de routage soit packagé sous Vue. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Le routage Vue est en mode de hachage par défaut, et il n'y a généralement aucun problème avec le packaging par défaut. Cependant, le mode de hachage n'est pas beau car l'URL aura un #, et il y aura quelques problèmes lors du partage sur. WeChat, autorisation de connexion, etc. Pièges. Par conséquent, le mode historique présente également certains scénarios d'application. Les débutants rencontrent souvent la situation où la page est vide après le package du mode historique et il n'y a pas de message d'erreur de chargement des ressources. >

En fait, si vous étudiez cela attentivement, vous constaterez que si le projet est placé directement dans le répertoire, alors il n'y a pas de problème. S'il s'agit d'un sous-répertoire, alors il sera vide. . Vous devez ajouter une base

// base: '/history',
// mode: 'history',

Cette base est le chemin du projet.

Une fois les deux ci-dessus résolus. , vous constaterez toujours que seule la page d'accueil est accessible pour le moment, et que d'autres itinéraires sont également accessibles via la page d'accueil, mais s'il y a une erreur lors de l'actualisation dans d'autres itinéraires, ceux qui comprennent le mode historique doivent également le savoir. le mode historique est le history.pushState de l'API h5. Le navigateur simule un historique, mais il n'y a pas de ressource de chemin sur le serveur réel. Pourquoi le mode hachage n'a-t-il pas ce problème ? le serveur n'analysera pas. Au lieu de simplement renvoyer du HTML, index.html sera analysé selon la route vue, tandis que le mode historique demandera cette adresse au serveur. S'il n'y a pas de chemin pertinent, une erreur sera signalée. . La documentation officielle de vue-router présente diverses configurations, telles que la configuration ngnix

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

ci-dessus C'est OK pour le répertoire racine du. projet direct, mais il y aura toujours des problèmes si le projet n'est pas le répertoire racine

location /history {
   root C:/web/static;
 index index.html index.htm;
 #error_page 404 /history/index.html;
 if (!-e $request_filename) {
  rewrite ^/(.*) /history/index.html last;
  break;
 }
}

Ce qui précède est le nom du chemin du projet. est l'historique, de sorte qu'après la configuration, il n'y aura aucun problème de pages vierges après l'empaquetage de Vue, et la route de l'historique est également accessible librement. Cependant, rappelez-vous ce qui est dit ci-dessus, les projets de répertoires non racine doivent ajouter le chemin de base <.>

Ce qui précède représente 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 :

Introduction à l'optimisation de l'écran d'accueil de l'application monopage Vue SPA

Vue implémente un nombre fixe des lignes de saisie dans la zone de texte L'idée d'ajouter un style de soulignement

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!