Que dois-je faire si le projet Vue signale une erreur lors de la redirection dans le routage IE ?

Si vous développez un projet qui utilise le framework Vue.js et utilisez Vue Router pour gérer les routes, vous pouvez rencontrer un problème : sous le navigateur IE, le saut de route signalera une erreur.

Ce problème est généralement dû au fait que Vue Router utilise le mode Historique de HTML5, mais le navigateur IE ne prend pas en charge ce mode. Mais ne vous inquiétez pas, nous vous montrerons ci-dessous comment résoudre ce problème.

Solution

1. Présentation de polyfill

Le mode Historique HTML5 nécessite que le navigateur prenne en charge l'API HTML5, et le navigateur IE ne prend en charge que les versions antérieures de l'API HTML, nous devons donc utiliser polyfill pour le rendre compatible.

Vous pouvez utiliser le code suivant pour introduire le polyfill :

<!-- 引入 polyfill -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

2. Configurer le mode de routage

Afin de résoudre le problème selon lequel le navigateur IE ne prend pas en charge le mode Historique, nous devons modifier le mode de routage de Vue Router. Changez-le du mode Historique par défaut en mode Hash.

Dans le fichier de configuration de Vue Router, recherchez le code suivant :

const router = new VueRouter({
  mode: 'history',
  routes
})

Remplacez mode 的值由 history 改为 hash par :

const router = new VueRouter({
  mode: 'hash',
  routes
})

3. Configurez le serveur

Si votre projet doit également interagir avec le serveur lors du déploiement, vous devez configurer le serveur pour prendre en charge le saut d'itinéraire. Lors de l'utilisation du mode Historique de Vue Router, lorsque l'utilisateur saisit une adresse dans la barre d'adresse du navigateur, le serveur supposera par défaut que l'utilisateur doit accéder à un fichier ou un répertoire sous l'adresse et enverra la demande au serveur. système de fichiers pour le traitement. Mais en pratique, ce que nous préférons, c'est envoyer la requête à Vue Router pour traitement afin que la page actuelle puisse être restituée correctement.

Si vous utilisez Node.js comme serveur, vous pouvez le configurer via le code suivant :

const express = require('express')
const app = express()

app.use(express.static(__dirname + '/dist'))

// 对所有请求都返回 index.html 文件
app.get('*', function(req, res) {
  res.sendFile(__dirname + '/dist/index.html')
})

const port = process.env.PORT || 8080
app.listen(port, () => {
  console.log(`Server started at ${port}`)
})

Le code ci-dessus utilise le framework express et configure un dossier statique pour stocker les ressources statiques du site Web. Pour toutes les demandes, le fichier index.html sera renvoyé pour garantir que Vue Router fonctionne correctement et gère les demandes de redirection.

Résumé

Ce qui précède est la méthode pour résoudre l'erreur de saut de routage du projet Vue sous le navigateur IE. Lorsque vous rencontrez ce problème, vous pouvez essayer d'utiliser polyfill pour des raisons de compatibilité, modifier le mode de routage ou configurer le serveur. En vous assurant que les modifications sont correctes, le projet peut s'exécuter normalement dans le navigateur IE.

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!