web-dev-qa-db-fra.com

Utilisation de variables d'environnement avec Vue.js

J'ai lu la documentation officielle et je suis incapable de trouver quoi que ce soit sur les variables d'environnement. Apparemment, certains projets communautaires prennent en charge les variables d'environnement, mais cela risque d'être excessif pour moi. Je me demandais donc s'il y avait quelque chose de simple hors de la boîte qui fonctionne de manière native lorsque vous travaillez sur un projet déjà créé avec Vue CLI.

Par exemple, je peux voir que si je fais ce qui suit, le bon environnement indique que celui-ci est déjà configuré?

mounted() {
  console.log(process.env.ROOT_API)
}

Je suis un peu nouveau pour les variables env et Node.

FYI utilisant Vue 3.0 beta.

node.jsvue.jsenvironment-variablesvue-cli
6
Edgar Quintero

Si vous utilisez vue cli avec le modèle Webpack (configuration par défaut), vous pouvez créer et ajouter vos variables d’environnement à un fichier .env.

Les variables seront automatiquement accessibles sous process.env.variableName dans votre projet. Les variables chargées sont également disponibles pour toutes les commandes, plugins et dépendances de vue-cli-service.

Vous avez quelques options. C’est dans la documentation Variables d’environnement et Modes :

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

Votre fichier .env devrait ressembler à ceci:

VUE_APP_MY_ENV_VARIABLE=value
VUE_APP_ANOTHER_VARIABLE=value

Je crois comprendre que tout ce que vous avez à faire est de créer le fichier .env et d’ajouter vos variables, vous êtes prêt à partir! :)

Comme indiqué dans le commentaire ci-dessous: Si vous utilisez Vue cli 3, seules les variables commençant par VUE_APP_ seront chargées.

7
RAH

Si vous utilisez Vue cli 3, seules les variables commençant par VUE_APP_ seront chargées.

Dans main.js

import dotenv from 'dotenv'
dotenv.config()

et dans la racine, créez un fichier .env avec:

VUE_APP_ENV_VARIABLE=value

Avec cela, vous pourrez utiliser process.env.VUE_APP_ENV_VARIABLE dans votre projet (fichiers .js et .vue).

10
Pedro Silva

Un problème que je rencontrais était que J'utilisais l'installation de webpack-simple pour VueJS qui ne semblait pas inclure de dossier de configuration d'environnement variable. Je ne pouvais donc pas éditer les fichiers de configuration env.test, development et production.js. Leur création n'a pas aidé non plus.

D'autres réponses n'étaient pas assez détaillées pour moi, alors j'ai juste "bidouillé" avec webpack.config.js. Et ce qui suit a bien fonctionné.

Donc, pour que les variables d’environnement fonctionnent, le fichier webpack.config.js doit comporter les éléments suivants en bas:

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

Sur la base de ce qui précède, en production , vous pourrez obtenir la variable NODE_ENV.

mounted() {
  console.log(process.env.NODE_ENV)
}

Il existe peut-être de meilleures façons de le faire, mais si vous souhaitez utiliser les variables d'environnement dans le développement, procédez comme suit:

if (process.env.NODE_ENV === 'development') {

  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"'
      }
    })
  ]);

}

Maintenant, si vous voulez ajouter d'autres variables avec, ce serait aussi simple que:

if (process.env.NODE_ENV === 'development') {

  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"',
        ENDPOINT: '"http://localhost:3000"',
        FOO: "'BAR'"
      }
    })
  ]);
}

Je dois aussi noter que vous semblez avoir besoin des guillemets doubles "" pour une raison quelconque.

Donc, en développement , je peux maintenant accéder à ces variables d’environnement:

mounted() {
  console.log(process.env.ENDPOINT)
  console.log(process.env.FOO)
}

Voici l'intégralité de webpack.config.js juste pour un contexte:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

if (process.env.NODE_ENV === 'development') {

  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"',
        ENDPOINT: '"http://localhost:3000"',
        FOO: "'BAR'"
      }
    })
  ]);

}
2
Aaron McKeehan

Dans la racine de votre projet, créez vos fichiers d’environnement:

  • .env
  • .env.someEnvironment1
  • .env.SomeEnvironment2

Pour charger ensuite ces configurations, vous devez spécifier l’environnement via mode i.e.

npm run serve --mode development //default mode
npm run serve --mode someEnvironment1

Dans vos fichiers env, vous déclarez simplement la configuration en tant que paires clé-valeur, mais si vous utilisez la vue 3, vous préférez must avec VUE_APP_:

Dans votre .dev:

VUE_APP_TITLE=This will get overwritten if more specific available

.dev.someEnvironment1:

VUE_APP_TITLE=My App (someEnvironment1)

Vous pouvez ensuite l'utiliser dans n'importe lequel de vos composants via:

myComponent.vue:

<template>
  <div> 
    {{title}}
  </div>
</template>

<script>
export default {
  name: "MyComponent",
  data() {
    return {
      title: process.env.VUE_APP_TITLE
    };
  }
};
</script>

Maintenant, si vous avez exécuté l'application sans une mode, le message "Ceci va arriver ..." s'affichera, mais si vous spécifiez un someEnvironment1 comme étant votre mode, vous obtiendrez alors le titre.

Vous pouvez créer des configurations qui sont "cachées" dans git en ajoutant .local à votre fichier: .env.someEnvironment1.local - très utile lorsque vous avez des secrets. 

Lisez la documentation pour plus d’informations. 

0
benscabbia

En vue-cli version 3:

Il existe des options pour les fichiers .env: Vous pouvez soit utiliser .env, soit: 

  • .env.test
  • .env.development
  • .env.production

Vous pouvez utiliser des variables personnalisées .env en utilisant le préfixe regex /^/ au lieu de /^VUE_APP_/ dans /node_modules/@vue/cli-service/lib/util/resolveClientEnv.js:prefixRE. 

Cela n’est certainement pas recommandé dans le but de développer une application open source dans différents modes comme le test, le développement et la production de fichiers .env. Parce que chaque fois que vous npm install .., il sera remplacé.

0
CagCak