Comment configurer le proxy dans le projet Vue

Avant-propos

Dans le développement front-end, nous rencontrons souvent des situations où nous devons obtenir des données en demandant au serveur. Cependant, lorsque nous effectuons du développement local, le serveur n'est souvent pas encore construit. Pour le moment, nous ne pouvons certainement pas rester assis et attendre. À ce stade, nous devons construire une fausse interface localement pour simuler le retour des données du serveur.

Dans le projet Vue, nous pouvons configurer un proxy via le fichier vue.config.js et développer l'interface backend localement, ce qui améliore considérablement l'efficacité du développement. Cet article présentera en détail comment configurer le proxy dans le projet Vue et implémenter de fausses données d'interface.

Texte

La configuration du proxy dans le projet Vue doit être effectuée dans le fichier vue.config.js. Si le projet est construit avec vue-cli3.x, vérifiez d'abord si le fichier vue.config.js existe dans le répertoire racine du projet. S'il n'existe pas de fichier de ce type, vous devez créer manuellement ce fichier dans le répertoire racine du projet. A ce stade, nous pouvons copier le modèle de configuration de vue.config.js officiellement fourni par vue-cli :

module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 服务器地址
        changeOrigin: true,
        pathRewrite: {
          '/api': '' // 重写路径，例如接口地址是 /api/user，重写成 /user
        }
      }
    }
  }
}

Dans le code ci-dessus, notre agent est configuré dans l'option devServer. Parmi eux, le port est utilisé pour spécifier le numéro de port du serveur de développement ; le proxy est utilisé pour configurer le proxy, qui est un type d'objet. La valeur de la clé est utilisée pour correspondre à l'interface qui nécessite un proxy, et la valeur est la valeur. élément de configuration du proxy.

Les éléments de configuration dans l'objet proxy sont présentés ci-dessous :

• cible : adresse du serveur. Indique l'adresse du serveur cible qui doit être proxy, qui peut être une adresse IP ou un nom de domaine. Elle est généralement spécifiée via http(s)://. Par exemple, http://localhost:3000 est l'adresse du serveur cible.
• changeOrigin : Qu'il s'agisse de cross-domain. En mode développement, nous devons le définir sur true, ce qui signifie qu'après réception de la requête, le champ d'origine de l'URL sera directement remplacé par l'adresse proxy. Par exemple, l'URL demandée par le frontal via ajax est http://localhost:8080/api/list Si la cible est définie sur http://localhost:3000, alors lorsque changeOrigin est défini sur true, la demande réelle. L'URL envoyée deviendra http://localhost:3000/api/list .
• pathRewrite : Réécriture de chemin. Pour certaines adresses d'interface contenant des préfixes tels que /api, /web, etc., ces préfixes doivent être réécrits. Par exemple, si l'URL demandée est /api/user, lors de la réécriture du chemin, vous devez supprimer le préfixe /api et le réécrire sous /user.

Il est à noter que dans l'environnement de développement, le proxy du Le projet Vue ne répond qu'à ce que le serveur de développement prenne effet. Dans un environnement de production, vous devrez peut-être convertir le proxy configuré dans devServer en une solution de proxy inverse telle que Nginx.

Résumé

Dans le développement de projets Vue, le proxy est un outil très pratique. Grâce au proxy, nous pouvons transférer les appels vers l'interface backend vers des données fictives locales et gérer les problèmes inter-domaines avec élégance. Cet article explique comment configurer le proxy dans le projet Vue pour effectuer le développement front-end plus efficacement. L'utilisation du proxy en développement peut accélérer notre développement et améliorer l'expérience de développement.

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!