Comment gérer l'erreur 404 signalée par Tomcat lorsque le projet Vue est empaqueté et déployé avec webpack

Cette fois, je vais vous montrer comment gérer le problème d'erreur 404 lorsque Tomcat s'actualise lorsque le webpack du projet Vue est empaqueté et déployé. Quelles sont les précautions à prendre en compte, comme suit : Il s'agit d'un. cas pratique, jetons-y un coup d'œil.

Problèmes rencontrés

Après avoir utilisé webpack pour empaqueter vue, publiez le fichier empaqueté sur Tomcat, l'accès est réussi, mais l'actualisation suivante la page a signalé une erreur 404.

Après une recherche sur Internet, il s'avère qu'il s'agit d'un problème causé par le mode Historique HTML5. Le responsable de Vue a donné une explication pour la raison spécifique. Vous pouvez voir https://<.>router.vuejs.org /zh-cn/essentials/history-mode.html

Mais après l'avoir lu, le problème est réapparu. La solution officielle ne disait pas comment le résoudre sous Tomcat.

Solution

Selon le principe officiel de la solution

Vous devez en ajouter une sur le serveur pour couvrir toutes les situations Candidat ressources : si l'URL ne correspond à aucune ressource

statique, elle doit renvoyer la même page index.html, qui est la page dont dépend votre application.

Vous pouvez donc le faire sous le serveur Tomcat. Créez un nouveau dossier WEB-INF dans le répertoire racine du projet packagé et écrivez un web.xml dans WEB-INF.

Écrire dans web.xml :

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
           http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  version="3.1" metadata-complete="true">
  <display-name>Router for Tomcat</display-name>
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>

Le but est de revenir à la page index.html une fois qu'un 404 se produit.

Enfin, vous devez configurer votre itinéraire, configurer une situation de routage qui couvre tout, puis donner une page 404.

const router = new VueRouter({
 mode: 'history',
 routes: [
  { 
    path: '*', 
    component: (resolve) => require(['./views/error404.vue'], resolve) 
  }
 ]
})

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes permettant à php de générer une chaîne aléatoire de longueur personnalisée

php pour générer des nombres aléatoires, des lettres ou une chaîne mixte de chiffres et de lettres

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!