IP et port du proxy de configuration dynamique de Vue (Comment configurer le proxy pour Vue)

Configuration dynamique de Vue Proxy IP

Bonjour ! Bonjour à tous, je suis un passionné de programmation. Aujourd'hui, j'aimerais partager avec vous mon expérience sur la façon de configurer dynamiquement l'IP proxy dans un projet Vue.

Dans notre monde de programmation, il arrive que nos applications aient besoin d'accéder à des interfaces ou à des ressources externes qui sont souvent stockées sur des serveurs distants. Pour faciliter le développement et le débogage, nous avons souvent besoin de développer localement mais de nous connecter au serveur distant. La question se pose alors de savoir comment configurer un proxy IP dans l'environnement de développement local.

Tout d'abord, laissez-moi vous raconter une histoire pour expliquer cela graphiquement. Supposons que notre application soit un petit bateau et que le serveur distant soit une île immense. Nous voyageons dans ce petit bateau et espérons atteindre cette île sans problème. Mais, pour une raison ou une autre, nous ne pouvons pas naviguer directement vers cette île. C'est alors que l'astucieux capitaine du bateau propose une solution : nous pouvons trouver une zone de transit située en face de l'île et pouvant mener à celle-ci. En passant par la station de transit, nous pouvons atteindre notre destination indirectement. Dans le programme, ce point de transit peut être appelé un proxy IP.

Alors, comment configurer cette IP proxy dans notre projet Vue ? Laissez-moi vous montrer en détail.

Tout d'abord, dans le répertoire racine de notre projet Vue, nous pouvons trouver un fichier appelé vue.config.js. Ce fichier est comme une boussole sur notre bateau, il nous guide dans la bonne direction. En ouvrant ce fichier, nous verrons quelques éléments de configuration par défaut.

"`javascript

module.exports = {

// …

}

“`

Ensuite, nous devons ajouter quelque chose pour configurer l'IP du proxy. Dans ce fichier, nous pouvons trouver un attribut appelé devServer, qui gère la configuration liée à l'environnement de développement. Voyons comment l'utiliser.

"`javascript

module.exports = {

// …

devServer : {

proxy : {

'/api' : {

cible : "http://localhost:3000",

changeOrigin : true

}

}

}

}

“`

Dans le code ci-dessus, nous avons configuré un proxy par le biais de l'attribut proxy. Où '/api' indique que notre chemin de requête commence par /api, qui est le pont entre nous et l'île. Et l'attribut target spécifie l'adresse IP et le numéro de port du serveur distant auquel nous voulons réellement nous connecter. Dans cet exemple, nous supposons que l'adresse IP du serveur distant est http://localhost:3000. L'attribut changeOrigin a la valeur true, ce qui indique que le champ origin dans l'en-tête de la requête doit être modifié pour que le serveur reconnaisse correctement la source de notre requête.

Comment Vue configure les ports proxy

Bon, nous avons maintenant configuré avec succès l'IP du proxy, mais nous devons également configurer le numéro de port du proxy. C'est aussi important que le quai où nous amarrons notre bateau sur l'île. Laissez-moi continuer à partager mon expérience avec vous.

Dans le répertoire racine de notre projet Vue, nous trouvons un fichier appelé .env.development. Ce fichier est comme un billet sur notre petit bateau, il documente notre voyage vers l'avant. En ouvrant ce fichier, nous verrons une ligne de code.

“`

VUE_APP_PORT=8080

“`

Ici, VUE_APP_PORT est le numéro de port que nous devons modifier. Dans l'environnement de développement de Vue, le numéro de port par défaut est 8080, mais il est parfois nécessaire d'utiliser d'autres numéros de port. Remplaçons-le par 3000 !

“`

VUE_APP_PORT=3000

“`

En modifiant ce fichier, nous indiquons au serveur de développement Vue que nous voulons utiliser le port 3000 pour exécuter notre projet. De cette manière, notre requête sera correctement transmise au serveur distant.

Enfin, nous avons résolu avec succès le problème de la configuration dynamique de l'IP et du port du proxy dans le projet Vue. Maintenant, nous pouvons déboguer avec plaisir dans notre environnement de développement local. Tout comme notre petit bateau naviguant vers une île lointaine, nous avons surmonté les difficultés et atteint notre objectif.

J'espère que ce que j'ai partagé aujourd'hui pourra vous aider. Que ce soit dans le monde de la programmation ou dans la vie réelle, nous devons tous faire face à une variété de problèmes et de défis. Tant que nous gardons notre courage et notre sagesse, je pense que nous finirons par trouver une solution.

Merci d'avoir écouté, et bonne chance avec votre programmation et vos projets !