Que sont les variables d'environnement
Les variables qui changent en fonction de l'environnement de code actuel sont appelées variables d'environnement . Par exemple, définissez BASE_URL sur des valeurs différentes dans l'environnement de production et l'environnement de développement pour demander des interfaces dans différents environnements.
Les variables d'environnement sont généralement accessibles globalement. Dans webapck, nous avons peut-être vu un tel code
// webpack.config.js
module.exports = {
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}process.env.NODE_ENV est une variable d'environnement.
- process.env est une API fournie par Nodejs, qui renvoie un objet contenant toutes les variables d'environnement du Shell actuel. Par exemple, process.env.HOME renvoie le répertoire personnel de l'utilisateur.
- process.env pour la configuration de l'environnement webpack : https://www.yuque.com/persagy/mkk933/qycy0e
Comment utiliser les variables d'environnement dans vite
Variables d'environnement et process.env
L'utilisation de variables d'environnement implémente une logique différente basée sur différents environnements. Par exemple, définissez BASE_URL sur des valeurs différentes dans l'environnement de production et l'environnement de développement pour demander des interfaces dans différents environnements.
Mais il faut noter que l'identification des variables d'environnement ici est réalisée côté navigateur, et le navigateur effectue des logiques différentes selon les différentes variables d'environnement !
Dans vue2, webpack nous a aidés à faire le traitement, afin que le navigateur puisse reconnaître directement la variable process.env du nœud, réalisant ainsi la fonction du navigateur pour reconnaître la variable d'environnement.
- In vite, notre code s'exécute dans l'environnement du navigateur, donc la variable process.env ne peut pas être reconnue. (Cela signifie que la façon d'identifier les variables d'environnement dans vite est différente de celle dans webpack)
- vite.config.js s'exécute dans l'environnement de nœud, de sorte que les variables process.env peuvent être reconnues
Regardez l'exemple suivant :
nous imprimons process.env dans main.js, le navigateur ne reconnaît pas process.env et signalera une erreur
console.log(' process.env: ', process.env);
vite.config.js s'exécute dans l'environnement de nœud et peut imprimer process.env
Alors, comment identifier les variables d'environnement in vite ?
Variables d'environnement en vite
Vite expose les variables d'environnement sur un objet spécial import.meta.env . Voici quelques variables intégrées qui peuvent être utilisées dans tous les cas :
- import.meta.env.MODE : {string} Le mode d'exécution de l'application .
- import.meta.env.BASE_URL : {string} L'URL de base lors du déploiement de l'application. Il est déterminé par l'élément de configuration de base .
- import.meta.env.PROD : {booléen} Indique si l'application s'exécute dans un environnement de production .
- import.meta.env.DEV : {booléen} Indique si l' application s'exécute dans l'environnement de développement (toujours l'opposé de import.meta.env.PROD).
- import.meta.env.SSR : {booléen} Indique si l'application est en cours d'exécution sur le serveur .
Imprimons-le dans main.js
console.log(' import.meta.env.MODE: ', import.meta.env.MODE);
console.log(' import.meta.env.BASE_URL: ', import.meta.env.BASE_URL);
console.log(' import.meta.env.PROD: ', import.meta.env.PROD);
console.log(' import.meta.env.DEV: ', import.meta.env.DEV);
console.log(' import.meta.env.SSR: ', import.meta.env.SSR);
Remarque : Ces variables ne sont pas accessibles dans vite.config.js dans l'environnement d'exécution.
Alors, comment personnalisons-nous certaines variables d'environnement ?
Variables d'environnement personnalisées dans vite
Vite a intégré dotenv , une bibliothèque tierce, dotenv lira automatiquement le fichier .env et dotenv chargera des variables d'environnement supplémentaires à partir des fichiers suivants dans votre répertoire d'environnement :
.env # sera chargé dans tous les cas.env
.[mode] # uniquement chargé dans le mode spécifié
par défaut
- npm run dev chargera la configuration dans .env et .env.development
- npm run build chargera la configuration dans .env et .env.production
- mode peut être remplacé par l'option --mode sur la ligne de commande.
Les variables d'environnement chargées sont également exposées au code source du client sous forme de chaînes via import.meta.env . Pour éviter la fuite accidentelle de certaines variables d'environnement vers le client, seules les variables préfixées par VITE_ seront exposées au code traité par vite.
Vérifions :
Nous créons un fichier .env dans le répertoire racine du projet et écrivons le contenu du test ;
HELLO = "小伙子，我是base数据"
VITE_HELLO = "小伙子，我是base数据"Créez un fichier .env.development et rédigez le contenu du test ;
HI = "小伙子，我是development数据"
VITE_HI = "小伙子，我是development数据"Créez un fichier .env.production et rédigez le contenu du test ;
MD = "小伙子，我是production数据"
VITE_MD = "小伙子，我是production数据"Puis imprimez-le dans main.js
console.log(' HI: ', import.meta.env.HI);
console.log(' VITE_HI: ', import.meta.env.VITE_HI);
console.log(' HELLO: ', import.meta.env.HELLO);
console.log(' VITE_HELLO: ', import.meta.env.VITE_HELLO);
console.log(' MD: ', import.meta.env.MD);
console.log(' VITE_MD: ', import.meta.env.VITE_MD);Exécutez la commande npm run dev et observez les résultats d'impression du navigateur
Puisque nous exécutons run dev et que le mode appartient à development , les variables préfixées par VITE_ dans .env et .env.development seront reconnues.
Configuration avancée de la variable d'environnement Vite
Charger un fichier .env personnalisé
Basé sur le mode design de vite, les fichiers .env correspondant au mode développement (development) et au mode production (production) peuvent être chargés dans le projet par défaut.
Si nous personnalisons un environnement de test et que nous voulons charger les variables d'environnement dans .env.test, que devons-nous faire ?
1. Le mode mode spécifié affiché
Reportez-vous à la configuration de partage de mode de vite | Vite document officiel chinois
Par commodité, nous configurons directement la commande "test" dans package.json : "vite --mode test" ,
"scripts": {
"test": "vite --mode test",
"dev": "vite",
"build": "vite build"
},2. Créez un fichier .env.test dans le répertoire racine
VITE_HI = "1111111111111111111111111111111111"Imprimer cette variable d'environnement dans main.js console.log(' VITE_HI: ', import.meta.env.VITE_HI);
Exécutez la commande npm run test et observez les résultats de la console du navigateur.
On peut voir qu'à ce moment, les variables d'environnement de notre environnement de test personnalisé sont imprimées.
Changer l'adresse par défaut de .env
Nos fichiers .env actuels sont tous créés dans le répertoire racine. S'il y a trop de fichiers .env.XX, notre répertoire de projet apparaîtra en désordre. Pouvons-nous mettre .env dans un dossier unifié ?
Peut être modifié par la configuration envDir ! Référence : Configuration partagée | Documentation chinoise officielle de Vite
envDir Le répertoire à partir duquel charger les fichiers .env. Peut être un chemin absolu ou un chemin relatif à la racine du projet.
- Type : chaîne
- Par défaut : racine
Par exemple, nous le configurons comme ceci dans vite.config.js
import { defineConfig } from "vite";
export default defineConfig( {
envDir:"env"
});Ensuite, tous les fichiers .env.xxx peuvent être placés dans le dossier env du répertoire racine du projet.
Changer le préfixe VITE_ de la variable d'environnement
Si vous pensez que le préfixe VITE_ n'est pas suffisant, et que vous souhaitez le changer, comment le changer ?
Utilisez la configuration envPrefix pour changer ! Référence : Configuration partagée | Documentation chinoise officielle de Vite
Les variables d'environnement commençant par envPrefix seront exposées dans le code source de votre client via import.meta.env.
- Tapez : chaîne | chaîne[]
- Par défaut : VITE_
Précautions de sécurité
envPrefix ne doit pas être défini sur la chaîne vide ' ' , cela exposera toutes vos variables d'environnement, entraînant la divulgation accidentelle d'informations sensibles. Vite lancera une erreur lorsqu'il détectera que la configuration est ' ' .
Gestion spéciale des variables d'environnement de chargement rapide
Il existe une variable globale process.env dans l'environnement du nœud. Basé sur le principe de chargement de dotenv, les variables d'environnement définies dans .env peuvent théoriquement être imprimées dans vite.config.js.
Nous créons un fichier .env dans le projet, configurons les variables d'environnement, essayons
HELLO = "小伙子，你很行啊"Nous imprimons dans vite.config.js.
import { defineConfig } from "vite";
export default defineConfig(({ command, mode, ssrBuild }) => {
console.log("process.env: ", process.env.HELLO);
return {
//....一些vite配置
};
});La chose étrange est que process.env.HELLO n'est pas imprimé (note : c'est maintenant un environnement de nœud), pourquoi ?
Grâce aux exemples des sections précédentes, nous pouvons savoir que l'option envDir affectera l'emplacement où le fichier .env est chargé. Par conséquent, Vite ne charge pas le fichier .env par défaut , car ces fichiers doivent être configurés après que Vite est configuré pour déterminer lequel charger.