22
votes

Variables d'environnement Vue-cli 3 toutes non définies

J'ai essayé toutes les solutions, mais aucune ne semble fonctionner pour moi. Je veux juste stocker certaines valeurs dans un fichier .env dans mon application Vue, mais en essayant simplement de journaliser process.env renvoie un objet vide à partir du composant.

Mon fichier .env

mounted() {
    this.$nextTick(() => {
      console.log(process.env.VUE_APP_URL);
    })
  }

Mon plan était de définir ces variables d'environnement sur des propriétés de données, mais cela renvoie toujours undefined . Si je fais console.log(process.env.NODE_ENV) partir de webpack.config.js, cela montrera que je suis en développement mais si j'essayais de faire la même chose depuis le composant comme

VUE_APP_URL={api url}
VUE_APP_TOKEN={token}

Il renvoie simplement undefined .

vue.js vuejs2 vue-cli environment-variables vue-cli-3

2 commentaires

Où avez-vous copié le fichier .env? Vous devriez le placer dans le répertoire racine en tant que frère de 'package.json' et espérons que vous accéderez aux valeurs comme celle-ci proceess.env.VUE_APP_URL

Mon fichier .env trouve dans le répertoire racine et est un frère de package.json et webpack.config.js. L'appel de process.env.VUE_APP_URL partir d'un composant renvoie undefined

7 Réponses :

8
votes

Si votre version vue-cli est supérieure à 3.x et que vous mettez vos fichiers .env dans le répertoire racine comme indiqué dans les commentaires. Ensuite, vous pouvez accéder à vos variables d'environnement à partir de composants (comme ce process.env.VUE_APP_YOUR_VARIABLE ). Comme dit dans la documentation vue-cli

Seules les variables commençant par VUE_APP_ seront intégrées statiquement dans le bundle client avec webpack.DefinePlugin . Vous pouvez y accéder dans votre code application: console.log(process.env.VUE_APP_SECRET)

0 commentaires

9
votes

Je l'ai compris - j'ai dû installer dotenv-webpack et l'initialiser dans webpack.config.js, ce qui est étrange car aucun des documents n'indiquait que je devais le faire.

3 commentaires

Merci. Je cherche une solution depuis plusieurs heures maintenant. C'est tellement étrange car l'hôte et le port ont été écrasés dans config / index.js par un simple require('dotenv').config(); . Je n'aurais jamais deviné que j'aurais besoin de quelque chose de plus pour utiliser les variables dans les composants Vue.

Si quelqu'un est aussi stupide que moi, j'ai raté le fait que les fichiers devraient commencer par .env (par exemple, seulement le nom de fichier .env). Au lieu de cela, j'ai utilisé le fichier myconfig.env, ce qui était faux. Donc, dans mon application vue construite avec cli 3.x, cela fonctionne sans aucun dotenv.config ou quelque chose comme ça

J'ai beaucoup cherché, mais c'est la seule solution que j'ai essayée qui fonctionne avec webpack sans vue-cli. Cela a fait l'affaire pour moi.

6
votes

donc j'utilise VUE_APP_API_URL (cela ne fonctionne pas) puis je le change en VUE_APP_APIURL (cela fonctionne)

J'espère que cela aide

1 commentaires

Confirmation: cette solution fonctionne.

53
votes

Quelques conseils pour les personnes qui débarquent ici:

Assurez-vous que vos fichiers .env trouvent dans le dossier racine du projet (et non dans, disons src/ )
Les noms de variable doivent commencer par VUE_APP_ s'ils doivent être incorporés statiquement dans le groupe client
Redémarrez le serveur de développement ou générez votre projet pour que les modifications prennent effet
Si vous migrez à partir d'une solution basée sur un pack Web, assurez-vous de remplacer : (à partir de la configuration JSON) par = ( format dotenv ). Facile à manquer
Dans les anciennes versions de Vue, les variables d'environnement étaient définies par exemple dans config/dev.env.js au lieu des fichiers .env à la racine

3 commentaires

Même avec HMR, cela n'a pas fonctionné tant que je n'ai pas rechargé le serveur: /

Oui, HMR n'aidera pas avec les variables d'environnement. Le projet doit être reconstruit pour que les modifications prennent effet.

Enregistrez également les fichiers .env. Chaque fois que vous les changez. Et puis recommencez.

0
votes

C'est ce qui a fonctionné pour moi. J'ai précédemment créé mes fichiers .env.development et .env.production dans le dossier racine en cliquant manuellement avec le bouton droit sur l'exploer dans VS Code et en ajoutant un nouveau fichier. Cela me donnait toujours indéfini.

J'ai supprimé les fichiers et installé pour la première fois npm install touch-cli -g Une fois installé, j'ai ajouté les fichiers d'environnement tels que touch .env.production et touch .env.production et itworks. Je pense donc qu'il y a une différence entre la manière dont ces fichiers env sont générés.

REMARQUE: je n'ai pas installé Webpack. Utiliser simplement la vue cli pour construire

Outils de développement VS Code Explorer Chrome

0 commentaires

0
votes

J'ai mis mon fichier .env dans le répertoire racine et ajouté à chaque variable VUE_APP_ .

Pour illustrer cela, par exemple, si la variable que vous souhaitez utiliser est API_BASE_URL

Dans votre fichier .env , vous mettez la variable sous la forme VUE_APP_API_BASE_URL=baseurl/api/v1

Pour y accéder dans vos fichiers, vous faites process.env.VUE_APP_API_BASE_URL .

CAVEAT:

Ne mettez jamais d'informations sensibles que vous ne voulez pas que quiconque voie, sur votre front-end. La chose la plus courante que vous ne voudriez pas que quiconque voie (en ce qui concerne le développement Web) est votre clé API. Il y a de réelles conséquences à faire cela. Ceci est un exemple de quelqu'un qui a été brûlé exposant des clés API au public.

Cependant, même si vous placez vos données sensibles dans un fichier .env et ajoutez le fichier .env à un fichier .gitignore (donc ne pas le pousser vers un service d'hébergement de référentiel Git, par exemple Github, BitBucket, Gitlab, etc.), vos données sont toujours pas sûr sur le front-end. Ce n'est sûr que lorsque cela est fait sur du code back-end car il sera hébergé sur un serveur.

Dans le front-end, toute personne suffisamment déterminée peut trouver vos informations sensibles. Toutes vos informations sont disponibles sur un navigateur et tout ce que cette personne a à faire est d'ouvrir les dev tools et de vérifier l'onglet Sources , et BOOM toutes vos informations sensibles sont mises à nu.

Les variables d'environnement sur le front-end ne sont utiles que lorsque vous voulez un point de référence pour les informations NON SENSIBLES, telles qu'une URL de BASE, comme illustré dans l'exemple ci-dessus. Une URL de BASE peut changer au cours du développement et vous ne voudrez pas changer toutes les références dans le dossier d'application manuellement. C'est fastidieux et vous risquez d'en manquer quelques-uns, ce qui entraînerait des erreurs.

Si vous souhaitez éviter d'exposer vos clés API et d'autres informations sensibles dont vous pourriez avoir besoin sur le front-end, consultez cet article .

0 commentaires

2
votes

Installez dotenv-webpack et configurez le fichier vue.config.js comme suit.

console.log(process.env.VUE_APP_VAR1); // "example"
console.log(process.env.VUE_APP_VAR2); // "value"

Ajoutez ceci à votre fichier de configuration:

VUE_APP_VAR1=example
VUE_APP_VAR2=value

Dans votre fichier .env , assurez-vous d'ajouter VUE_APP_ avant vos variables comme ceci:

const Dotenv = require('dotenv-webpack');


module.exports = {
  configureWebpack: {
    plugins: [
      new Dotenv()
    ]
  }
}

Vous pouvez maintenant accéder à ces variables dans votre application Vue:

npm install dotenv-webpack --save-dev

Voici quelques liens pour référence:

0 commentaires