Variables d’environnement

Par défaut, dans Vue CLI, les variables d’environnement sont définies en utilisant le système de variables Node.js, mais cela requiert de reconstruire l’application pour chaque environnement et à chaque modification de valeur.

Pour répondre à cette problématique, les variables d’environnement sont stockées dans l’objet global window et sont définies dans un fichier généré dynamiquement pour chaque environnement.

Ajout d’une variable d’environnement

Les variables d’environnement sont définies dans le fichier public/js/config.js :

window.MA_VARIABLE = 'Ma valeur';

En local, vous pouvez modifier directement ce fichier. Pour que les variables fonctionnent sur vos différents environnements, vous devez modifier le fichier public/js/config.js.env :

window.MA_VARIABLE = '{{ MA_VARIABLE }}';

La valeur {{ MA_VARIABLE }} sera interprétée lors du déploiement et remplacée dynamiquement par la valeur définie sur l’environnement.

Il est également nécessaire d’implémenter l’interface globale Window dans le fichier src/global.d.ts afin que TypeScript reconnaisse cette nouvelle propriété :

declare global {
	interface Window {
		MA_VARIABLE: string;
	}
}

Utilisation d’une variable d’environnement

Pour utiliser une variable d’environnement, vous pouvez utiliser l’objet window qui est accessible globalement dans votre application :

if (window.MA_VARIABLE === 'true') {
	// …
}