web-dev-qa-db-fra.com

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

J'ai essayé toutes les solutions, mais aucune ne semble fonctionner pour moi. Je veux juste stocker quelques valeurs dans un fichier .env Dans mon application Vue mais en essayant simplement de journaliser process.env Renvoie un objet vide depuis le composant.

Mon fichier .env

VUE_APP_URL={api url}
VUE_APP_TOKEN={token}

Mon plan était de définir ces variables d'environnement sur les propriétés des données, mais il 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'ai essayé de faire la même chose depuis le composant comme

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

Il renvoie simplement undefined.

vue.jsvuejs2environment-variablesvue-clivue-cli-3
8
Dylan Nguyen

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

7
Dylan Nguyen

Quelques conseils pour les personnes qui atterrissent ici:

  1. Assurez-vous que votre .env les fichiers sont dans le dossier racine du projet (et pas disons src/)
  2. Les noms de variables doivent commencer parVUE_APP_ si elle doit être intégrée statiquement dans le bundle client
  3. Redémarrer le serveur de développement ou créez votre projet pour que les modifications prennent effet.
17
M3RS

Si votre vue-cli version est supérieur à 3.x et vous mettez vos fichiers .env dans le répertoire racine comme dit dans les commentaires. Vous pouvez ensuite accéder à vos variables d'environnement à partir de composants (comme ceci process.env.VUE_APP_YOUR_VARIABLE). Comme dit dans vue-cli docs

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 d'application: console.log(process.env.VUE_APP_SECRET)

7
bakhti_UZB

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 ça aide

1
IwanC