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

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/`//配置服务器地址
}

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>

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!