web-dev-qa-db-fra.com

Comment configurer les variables d'environnement avec vue-cli 3?

j'essaie d'utiliser des variables d'environnement dans vue-cli, mais ne fonctionne pas, à chaque fois dit "non défini" lorsque j'utilise console.log(process.env.VUE_APP_BASE_URI). Mais process.env.NODE_ENV dit "développement" tel que je l'ai défini dans webpack.config.js.

J'ai lu la documentation de vue-cli 3 et mis mes fichiers .env. * Dans le projet racine. comme ça: enter image description here

Webpack.config.js

    module.exports = {
  mode: 'development',
  context: __dirname,
  entry: {
    main: ['babel-polyfill', './App/index.js']
  },
  plugins:[
    new VueLoaderPlugin()
  ],

. env.development

VUE_APP_BASE_URI=http://localhost:64208/api/

. env.production

VUE_APP_BASE_URI=http://localhost:64208/api/

J'utilise .NET Core avec Vue. Comment utiliser l'environnement?

11

ça m'est juste arrivé, la solution est très simple. Redémarrez simplement votre serveur de développement.

ctrl + c

puis

npm run serve
4
Bagaskara

Vous devez renommer le fichier en .env uniquement au lieu de .env.production ou .env.development. cela devrait fonctionner, sinon, commenter le même fil.

1
Ajay Kumar

Je ne sais pas si c'est le même problème que vous aviez, mais cela s'est produit dans mon cas:

  • J'ai tout configuré correctement comme vous l'avez fait (pas de fichier .config.js)
  • J'ai ensuite arrêté et démarré le serveur de développement avec npm run serve
  • Quand j'ai actualisé la page, rien n'a changé dans la console

Ensuite, j'ai vu que la commande npm run serve avait démarré le site sur un autre port!. L'ancienne version fonctionnait toujours, mais donnait les anciennes valeurs. Lorsque j'ai essayé le nouveau port, les valeurs étaient correctes.

0
andreasnico

Il peut y avoir différentes façons d'y parvenir, un moyen simple à partir de la ligne de commande serait:

npx vue-cli-service serve --mode production

Par défaut, développement si mode n'a pas été spécifié.

0
Chuan