Maison interface Web js tutoriel Concernant la question de l'extraction des fichiers de configuration liés au projet lors du packaging de vue-cli (tutoriel détaillé)

Concernant la question de l'extraction des fichiers de configuration liés au projet lors du packaging de vue-cli (tutoriel détaillé)

Jun 01, 2018 am 09:15 AM
vue-cli 相关 项目

Ci-dessous, je partagerai avec vous une explication détaillée des fichiers de configuration liés au projet lors de l'empaquetage basé sur vue-cli. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Avant-propos : Lorsque vous utilisez vue-cli pour le développement, vous devez souvent configurer dynamiquement certains paramètres, tels que l'adresse de requête de l'interface (axios.defaults.baseURL). Ces paramètres peuvent devoir être définis après le). Le projet est compilé, donc dans vue-cli, nous devons extraire ces fichiers de configuration pour empêcher webpack de compiler les fichiers de configuration.

Tout d'abord, nous devons créer un nouveau fichier js sous /static comme fichier de configuration

Le contenu à l'intérieur est le suivant :

window.g={
 AXIOS_TIMEOUT:10000,
 SERVICE_CONTEXT_PATH:`http://10.200.199.84:9090/`//配置服务器地址
}
Copier après la connexion

Ici, toutes les configurations sont injectées dans un attribut de l'objet window Vous pouvez personnaliser cet attribut

puis introduire ce js

<script src="/static/js/config.js"></script>
Copier après la connexion

dans. index.html Lorsqu'il est utilisé dans un projet, utilisez directement window.g pour appeler le contenu de ce fichier de configuration.

Lors de l'emballage après une telle configuration, cela produira cet effet

Vous pouvez voir que le fichier de configuration ici sera affiché tel quel et ne le sera pas emballé, puis lorsque nous remettons le projet frontal compilé au personnel de déploiement pour le déploiement, il n'est pas nécessaire de demander l'adresse d'arrière-plan à l'avance. Le personnel de déploiement peut directement déterminer l'adresse du serveur en modifiant le contenu dans la configuration. .

Ainsi, de cette façon, les fichiers de configuration liés au projet peuvent être séparés.

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Méthode d'implémentation de la barre de navigation en étoile JavaScript

calculé, filtre, get, ensemble de vue.js Explication détaillée de utilisation et différence

Explication détaillée de l'ensemble du processus, de l'achat d'un nom de domaine à l'utilisation de pm2 pour déployer le projet node.js

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

L'IA peut-elle vaincre le dernier théorème de Fermat ? Un mathématicien a abandonné 5 ans de sa carrière pour transformer 100 pages de preuve en code L'IA peut-elle vaincre le dernier théorème de Fermat ? Un mathématicien a abandonné 5 ans de sa carrière pour transformer 100 pages de preuve en code Apr 09, 2024 pm 03:20 PM

Le dernier théorème de Fermat, sur le point d'être conquis par l'IA ? Et la partie la plus significative de tout cela est que le dernier théorème de Fermat, que l’IA est sur le point de résoudre, vise précisément à prouver que l’IA est inutile. Autrefois, les mathématiques appartenaient au domaine de l’intelligence humaine pure ; aujourd’hui, ce territoire est déchiffré et piétiné par des algorithmes avancés. Image Le dernier théorème de Fermat est une énigme « notoire » qui intrigue les mathématiciens depuis des siècles. Cela a été prouvé en 1993, et les mathématiciens ont désormais un grand projet : recréer la preuve à l’aide d’ordinateurs. Ils espèrent que toute erreur logique dans cette version de la preuve pourra être vérifiée par un ordinateur. Adresse du projet : https://github.com/riccardobrasca/flt

Regardons de plus près PyCharm : un moyen rapide de supprimer des projets Regardons de plus près PyCharm : un moyen rapide de supprimer des projets Feb 26, 2024 pm 04:21 PM

Titre : En savoir plus sur PyCharm : Un moyen efficace de supprimer des projets Ces dernières années, Python, en tant que langage de programmation puissant et flexible, a été privilégié par de plus en plus de développeurs. Dans le développement de projets Python, il est crucial de choisir un environnement de développement intégré efficace. En tant qu'environnement de développement intégré puissant, PyCharm fournit aux développeurs Python de nombreuses fonctions et outils pratiques, notamment la suppression rapide et efficace des répertoires de projet. Ce qui suit se concentrera sur la façon d'utiliser la suppression dans PyCharm

Partagez un moyen simple de packager des projets PyCharm Partagez un moyen simple de packager des projets PyCharm Dec 30, 2023 am 09:34 AM

Partagez la méthode d'empaquetage de projet PyCharm simple et facile à comprendre. Avec la popularité de Python, de plus en plus de développeurs utilisent PyCharm comme outil principal pour le développement Python. PyCharm est un puissant environnement de développement intégré qui fournit de nombreuses fonctions pratiques pour nous aider à améliorer l'efficacité du développement. L’une des fonctions importantes est le packaging du projet. Cet article explique comment empaqueter des projets dans PyCharm d'une manière simple et facile à comprendre, et fournit des exemples de code spécifiques. Pourquoi packager des projets ? Développé en Python

Conseils pratiques PyCharm : convertir le projet en fichier EXE exécutable Conseils pratiques PyCharm : convertir le projet en fichier EXE exécutable Feb 23, 2024 am 09:33 AM

PyCharm est un puissant environnement de développement intégré Python qui fournit une multitude d'outils de développement et de configurations d'environnement, permettant aux développeurs d'écrire et de déboguer du code plus efficacement. Lors du processus d'utilisation de PyCharm pour le développement de projets Python, nous devons parfois regrouper le projet dans un fichier EXE exécutable pour l'exécuter sur un ordinateur sur lequel aucun environnement Python n'est installé. Cet article explique comment utiliser PyCharm pour convertir un projet en fichier EXE exécutable et donne des exemples de code spécifiques. tête

Comment créer une liste de courses dans l'application de rappels iOS 17 sur iPhone Comment créer une liste de courses dans l'application de rappels iOS 17 sur iPhone Sep 21, 2023 pm 06:41 PM

Comment créer une liste d'épicerie sur iPhone sous iOS17 Créer une liste d'épicerie dans l'application Rappels est très simple. Il vous suffit d'ajouter une liste et de la remplir avec vos éléments. L'application trie automatiquement vos articles en catégories et vous pouvez même travailler avec votre partenaire ou partenaire d'appartement pour dresser une liste de ce que vous devez acheter dans le magasin. Voici les étapes complètes pour ce faire : Étape 1 : activer les rappels iCloud Aussi étrange que cela puisse paraître, Apple dit que vous devez activer les rappels d'iCloud pour créer une liste d'épicerie sur iOS17. Voici les étapes à suivre : Accédez à l'application Paramètres sur votre iPhone et appuyez sur [votre nom]. Ensuite, sélectionnez je

Basé sur le projet open source ChatGPT Web UI, créez rapidement votre propre site ChatGPT Basé sur le projet open source ChatGPT Web UI, créez rapidement votre propre site ChatGPT Apr 15, 2023 pm 07:43 PM

En tant que blogueur technologique, Fengfeng préfère toutes sortes de lancers. J'ai déjà introduit ChatGPT pour me connecter à WeChat, DingTalk et Knowledge Planet (si vous ne l'avez pas vu, vous pouvez lire l'article précédent récemment, lorsque j'ai regardé open). projets source, a découvert un projet ChatGPTWebUI. Pensant que je n'ai jamais connecté ChatGPT à WebUI auparavant, c'est vraiment bien d'avoir ce projet open source à utiliser. Voici les étapes d'installation pratiques à partager avec tout le monde. Le responsable de l'installation propose de nombreuses méthodes d'installation dans la documentation du projet Github, notamment l'installation manuelle, le déploiement de Docker et le déploiement à distance. Il est étonnant qu'en choisissant une méthode de déploiement, j'aie d'abord pensé à la simplicité.

Que faire s'il y a une erreur lors du démarrage du projet React Que faire s'il y a une erreur lors du démarrage du projet React Dec 27, 2022 am 10:36 AM

Solution à l'erreur lors du démarrage du projet React : 1. Entrez dans le dossier du projet, démarrez le projet et affichez le message d'erreur ; 2. Exécutez la commande « npm install » ou « npm install react-scripts » 3. Exécutez « npm install » ; @ant-design/ pro-field --save".

Tutoriel PyCharm : Comment supprimer des éléments dans PyCharm ? Tutoriel PyCharm : Comment supprimer des éléments dans PyCharm ? Feb 24, 2024 pm 05:54 PM

PyCharm est un puissant environnement de développement intégré (IDE) Python qui fournit des fonctions riches pour aider les développeurs à écrire et à gérer des projets Python plus efficacement. Lors du développement de projets à l'aide de PyCharm, nous devons parfois supprimer certains projets qui ne sont plus nécessaires pour libérer de l'espace ou nettoyer la liste des projets. Cet article détaillera comment supprimer des projets dans PyCharm et fournira des exemples de code spécifiques. Comment supprimer un projet Ouvrez PyCharm et entrez dans l'interface de la liste de projets. Dans la liste des projets,

See all articles