[vue-router] Concernant l'impact et les solutions de l'utilisation du mode hachage et du mode historique de vue-router sur l'introduction des ressources image dans vue2

Scénario du projet :

Environnement : vue2+vue-router3, utilisez l'échafaudage vue-cli pour construire le projet et utilisez le routage historique pour le routage

Introduction de ressources d'images

 <div class="imgs">
          <img class="img" src="../assets/image/warning.png" />
 </div>

Configuration du routage

 {
    
    
    path: '*',
    name: 'Index',
    component: Index,
    meta: {
    
    
      title: '',
      keepAlive: true
    }
  },
  {
    
    
    path: '/bind',
    name: 'BindAccount',
    component: Bind,
    meta: {
    
    
      title: '',
      keepAlive: true
    }
  },

---

Description du problème

1. Les ressources d'image locales s'affichent normalement, mais le chemin déployé vers les ressources en ligne est incorrect.

2. Les ressources d'images sur la page d'accueil sont introduites correctement, mais les chemins d'accès aux ressources d'images sur d'autres pages sont erronés.

---

Analyse des causes :

mode de hachage

En mode hachage, les informations de routage dans l'URL seront représentées par la partie après le symbole #, par exemple : http://example.com/#/about. Étant donné que le contenu après # ne sera pas envoyé au serveur, lors de l'utilisation du mode hachage, le changement de page ne déclenchera pas de requête au serveur. Cela facilite la mise en œuvre du routage frontal. Le chemin de référence de l'image peut utiliser un chemin relatif ou un chemin absolu, par exemple :

<img src="/images/example.jpg" alt="Example Image">

<img src="../images/example.jpg" alt="Example Image">

mode historique

En mode historique, le chemin de l'URL ressemblera davantage à une URL traditionnelle sans le symbole #, par exemple : http://example.com/about. De telles URL sont plus belles et conviviales pour les moteurs de recherche. En mode historique, lorsque la page change, une requête sera effectivement envoyée au serveur

Pour l'introduction de ressources d'images, étant donné que le chemin de l'URL changera à mesure que la route change, l'utilisation de chemins relatifs peut provoquer des erreurs de chargement d'image, notamment dans le cas de routes imbriquées. Afin de garantir l'introduction correcte des ressources d'image, des chemins absolus doivent être utilisés, par exemple :
(je ne recommande pas cette approche, car elle rendra le débogage hors ligne difficile)

<img src="/images/example.jpg" alt="Example Image">

---

solution:

Nous utilisons tous des chemins absolus par défaut, et les invites de code sont également des chemins absolus.

Utiliser le mode historique

Vous devez définir un paramètre de base. Le paramètre de base est le chemin de base du projet. Si notre environnement de déploiement l'est, alors le https:xxxx.com/static-m/项目名称/index.htmlparamètre de base est /static-m/项目名称/, afin que toutes les ressources soient introduites en fonction de ce chemin de base.

Remarque : Si le nom du projet est modifié, la valeur ici doit également être modifiée !

const router = new VueRouter({
    
    
  //如果打包部署上线图片显示不正确，注意修改这里！
  base: '/static-m/项目名称/',
   mode: 'history',
  routes
})

Utiliser le mode hachage

Commentez-le simplement, la valeur par défaut est d'utiliser le mode hachage.

const router = new VueRouter({
    
    
  //如果打包部署上线图片显示不正确，注意修改这里！
  //base: '/static-m/项目名称/',
   //mode: 'history',
  routes
})

En parallèle, configurez le routage et redirigez vers la page d'accueil par défaut.

{
    
    
    path: '/',
    redirect: '/index'
  },
  {
    
    
    path: '/index',
    name: 'Index',
    component: Index,
    meta: {
    
    
      title: '',
      keepAlive: true
    }
  },