web-dev-qa-db-fra.com

Comment utiliser dotenv avec Vue.js

J'essaie d'ajouter des variables d'environnement dans mon vue app.

voici le contenu de mon .env fichier, qui est placé à la racine (en dehors de src):

VUE_APP_GOODREADS_KEY = my_key

et j'ai ajouté du code pour dot env en haut de mon main.js

import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'
import Vuetify from 'vuetify'

import dotenv from 'dotenv'

dotenv.config()

import { router } from './router'
import store from './store'

Je veux utiliser cette variable dans mon magasin ./store/index.js

J'ai essayé de console.log variables d'environnement dans le magasin, mais pas de chance:

console.log(process.env)

Mais tout ce que je reçois c'est

NODE_ENV:"development"

Le seul thread connexe que j'ai trouvé était Charger les variables d'environnement dans vue.js , mais il mentionne uniquement comment utiliser les variables existantes dans le process.env. Je veux ajouter des variables d'environnement à l'aide de dotenv. Pourquoi ce code ne fonctionne pas?

node.jsvue.jsvuejs2
6
Dani Vijay

Si votre projet a été créé en utilisant Vue CLI 3, Pas besoin d'utiliser dotenv pour obtenir les variables d'environnement.

Pour obtenir des variables d'environnement dans le fichier .env De votre projet:

  1. Placer le fichier .env Dans la racine de votre projet.

  2. Dans le fichier .env, Spécification des variables d'environnement avec le préfixe "VUE_APP_".

    VUE_APP_SOMEKEY=SOME_KEY_VALUE.

  3. Enfin, vous pouvez y accéder avec process.env.* Dans votre code d'application.

    console.log(process.env.VUE_APP_SOMEKEY) // SOME_KEY_VALUE

Référence: Vue CLI 3 - Variables et modes d'environnement

28
white

Essayez de supprimer les espaces autour du signe égal.

VUE_APP_GOODREADS_KEY=my_key

Essayez également de déboguer comme ceci:

const config = dotenv.config()
if(config.error){
  console.log('Could not load env file', config.error)
}

Référence: https://github.com/motdotla/dotenv#config

1
Tudor Ilisoi

Lorsque vous utilisez Vuejs 2, vous devez utiliser les fichiers dev.env.js et prod.env.js situés dans le dossier config.

Vuejs 2 ne prend pas en charge l'utilisation de fichiers .env, cependant Vuejs 3 le fait .

// /config/prod.env.js
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  SERVER_URI: "http://someremoteuri:3333/api/v1"
}

// /config/dev.env.js
'use strict'
module.exports = {
  NODE_ENV: '"development"',
  SERVER_URI: "http://localhost:3333/api/v1"
}
1
PrestonDocks