VueJS Process montre undefined

Question

Vous avez une application construite en Vue. J'essaie de résoudre ce problème depuis un moment. Je suis incapable d'accéder aux variables du processus. J'ai essayé plusieurs choses jusqu'à présent.

• Je me suis assuré que mon fichier .env se trouve dans le répertoire racine.
• J'ai lancé la construction et le service chaque fois que j'ai ajouté des variables au fichier .env.
• installé dotenv

J'utilise vue/cli 4.3.1. Qu'est-ce que j'ai manqué ?

[Edits]

• Pour l'instant, mon .env n'a qu'une seule entrée.

• En essayant d'y accéder dans la méthode created()

  created : function() { console.log(process.env.VUE_APP_NOT_SECRET_CODE) ; }

• Voici la structure de mon dossier

Answer 1

Si process est undefined

Vérifiez votre version de NodeJs

Vous voudrez peut-être mettre à jour votre version de NodeJs (et npm), supprimer l'option node_modules et cliquez sur npm install encore. J'ai lu quelques cas où cela a aidé.

Recréer le env fichier

Le site .env Le fichier peut être défectueux d'une manière ou d'une autre. Essayez de supprimer le fichier et de le recréer en utilisant la console (par ex. touch .env sur linux)

Si les variables sont undefined

Vérifiez si vous avez la bonne dénomination : VUE_APP_MYVAR au lieu de MYVAR

L'erreur la plus courante lorsqu'il s'agit de Environment Variables à l'intérieur de Vue est la dénomination. Lorsque vous utilisez env vous devez préfixer toutes les variables avec VUE_APP_ sinon Vue ne les inclura pas.

Plus d'informations sur le contexte ici : https://cli.vuejs.org/guide/mode-and-env.html . Extrait de la documentation

Notez que seules les variables NODE_ENV, BASE_URL et celles qui commencent par VUE_APP_ seront incorporées statiquement dans le bundle du client avec webpack.DefinePlugin. C'est pour éviter d'exposer accidentellement une clé privée sur la machine qui pourrait avoir le même nom.

Veillez à ne pas inclure tout secret (comme les clés API privées) dans votre application ! Les variables d'environnement sont intégrées dans le build, ce qui signifie que tout le monde peut les voir en inspectant les fichiers de votre application.

Answer 2

J'ai essayé toutes les suggestions affichées ici et dans d'autres fils, mais je reçois toujours l'erreur "process is undefined". Pour ceux qui se demandent ce que j'ai fait, j'utilise window. webpackhotupdate pour déterminer si j'ai affaire à une build prod ou dev. webpackhotupdate est vrai dans les builds dev.

Ce n'est pas le plus élégant, mais cela fait l'affaire pour l'instant.