Variables et modes Env

Variables Env

Vite expose les variables env sur l'objet spécial import.meta.env. Certaines variables intégrées sont disponibles dans tous les cas :

import.meta.env.MODE : {chaîne} le mode dans lequel l'application fonctionne.
import.meta.env.BASE_URL : {string} l'url de base à partir de laquelle l'application est servie. Elle est déterminée par l'option de configuration base.
import.meta.env.PROD : {booléen} si l'application fonctionne en production.
import.meta.env.DEV : {booléen} si l'application est en cours de développement (toujours l'opposé de import.meta.env.PROD).
import.meta.env.SSR : {booléen} si l'application est exécutée dans le [serveur] (./ssr.md#conditional-logic).

Remplacement de la production

En production, ces variables env sont statiquement remplacées. Il est donc nécessaire de toujours les référencer en utilisant la chaîne statique complète. Par exemple, un accès dynamique aux clés comme import.meta.env[key] ne fonctionnera pas.

Il remplacera également ces chaînes apparaissant dans les chaînes JavaScript et les templates Vue. Cela devrait être un cas rare, mais cela peut être involontaire. Vous pouvez voir des erreurs comme Missing Semicolon ou Unexpected token dans ce cas, par exemple lorsque "process.env.NODE_ENV" est transformé en ""development" : ". Il existe des moyens de contourner ce comportement :

Pour les chaînes JavaScript, vous pouvez séparer la chaîne par un espace Unicode de largeur nulle, par exemple import.meta\u200b.env.MODE'.
Pour les modèles Vue ou tout autre HTML compilé en chaînes JavaScript, vous pouvez utiliser la balise [<wbr>] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr), par exemple import.meta.<wbr>env.MODE.

Fichiers `.env`

Vite utilise dotenv pour charger des variables d'environnement supplémentaires à partir des fichiers suivants dans votre répertoire d'environnement :

.env # chargé dans tous les cas
.env.local # chargé dans tous les cas, ignoré par git
.env.[mode] # chargé uniquement dans le mode spécifié
.env.[mode].local # chargé uniquement dans le mode spécifié, ignoré par git

Priorités de chargement des envois

Un fichier env pour un mode spécifique (par exemple .env.production) aura une priorité plus élevée qu'un fichier générique (par exemple .env).

De plus, les variables d'environnement qui existent déjà lorsque Vite est exécuté ont la plus haute priorité et ne seront pas écrasées par les fichiers .env. Par exemple, lors de l'exécution de VITE_SOME_KEY=123 vite build.

Les fichiers .env sont chargés au démarrage de Vite. Redémarrez le serveur après avoir effectué des modifications.

Les variables env chargées sont également exposées au code source de votre client via import.meta.env en tant que chaînes de caractères.

Pour éviter de divulguer accidentellement des variables env au client, seules les variables préfixées par VITE_ sont exposées à votre code traité par Vite. Par exemple, pour les variables env suivantes :

VITE_SOME_KEY=123
DB_PASSWORD=foobar

Seul Vite_SOME_KEY sera exposé comme import.meta.env.VITE_SOME_KEY au code source de votre client, mais pas DB_PASSWORD.

console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // non défini

Si vous souhaitez personnaliser le préfixe des variables env, consultez l'option envPrefix.

NOTES DE SÉCURITÉ

Les fichiers .env.*.local sont uniquement locaux et peuvent contenir des variables sensibles. Vous devriez ajouter *.local à votre .gitignore pour éviter qu'ils soient vérifiés dans git.
Puisque toutes les variables exposées dans votre code source Vite se retrouveront dans votre paquetage client, les variables VITE_* ne doivent pas contenir d'informations sensibles.

IntelliSense pour TypeScript

Par défaut, Vite fournit des définitions de type pour import.meta.env dans vite/client.d.ts. Bien que vous puissiez définir plus de variables env personnalisées dans les fichiers .env.[mode], vous pouvez vouloir obtenir TypeScript IntelliSense pour les variables env définies par l'utilisateur qui sont préfixées avec VITE_.

Pour cela, vous pouvez créer un fichier env.d.ts dans le répertoire src, puis augmenter ImportMetaEnv comme ceci :

typescript

/// <référence types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_TITLE : string
  // plus de variables env...
}

interface ImportMeta {
  readonly env : ImportMetaEnv
}

Si votre code repose sur des types provenant d'environnements de navigateur tels que DOM et WebWorker, vous pouvez mettre à jour le champ lib dans tsconfig.json.

json

{
  "lib" : ["WebWorker"]
}

Modes

Par défaut, le serveur de développement (commande dev) fonctionne en mode development et la commande build fonctionne en mode production.

Cela signifie que lorsque vous exécutez vite build, il chargera les variables env de .env.production s'il y en a une :

# .env.production
VITE_APP_TITLE=Mon application

Dans votre application, vous pouvez rendre le titre en utilisant import.meta.env.VITE_APP_TITLE.

Cependant, il est important de comprendre que le mode est un concept plus large que le simple développement ou la production. Un exemple typique est que vous pouvez vouloir avoir un mode "staging" où il devrait avoir un comportement similaire à la production, mais avec des variables env légèrement différentes de la production.

Vous pouvez écraser le mode par défaut utilisé pour une commande en passant l'option --mode. Par exemple, si vous voulez construire votre application pour notre hypothétique mode "staging" :

bash

vite build --mode staging

Et pour obtenir le comportement que nous voulons, nous avons besoin d'un fichier .env.staging :

# .env.staging
NODE_ENV=production
VITE_APP_TITLE=My App (staging)

Maintenant votre application de mise en place devrait avoir un comportement similaire à celui de la production, mais afficher un titre différent de celui de la production.

Variables et modes Env #

Variables Env #

Remplacement de la production #

Fichiers .env #

IntelliSense pour TypeScript #

Modes #