Utilisation des variables d'environnement avec Vue.js

Question

J'ai lu la documentation officielle et je n'ai rien trouvé sur les variables d'environnement. Apparemment, il existe des projets communautaires qui prennent en charge les variables d'environnement, mais cela pourrait être trop compliqué pour moi. Je me demandais donc s'il n'y avait pas quelque chose de simple, prêt à l'emploi, qui fonctionne de manière native lorsqu'on travaille sur un projet déjà créé avec Vue CLI.

Par exemple, je peux voir que si je fais ce qui suit, le bon environnement s'imprime, ce qui signifie qu'il est déjà configuré ?

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

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

Pour info, j'utilise Vue CLI version 3.0 beta.

Answer 1

Si vous utilisez vue cli avec le modèle Webpack (configuration par défaut), vous pouvez créer et ajouter vos variables d'environnement dans 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, ceci est tiré de l'initiative Documentation sur les variables d'environnement et les 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 doit ressembler à ceci :

VUE_APP_MY_ENV_VARIABLE=value
VUE_APP_ANOTHER_VARIABLE=value

Si j'ai bien compris, tout ce que vous devez faire est de créer le fichier .env et d'ajouter vos variables, puis vous êtes prêt à partir ! :)

Comme indiqué dans le commentaire ci-dessous : Si vous utilisez Vue cli 3, seules les variables qui commencent par VUE_APP_ sera chargé.

N'oubliez pas de redémarrer servir s'il est en cours d'exécution.

Answer 2

Si vous utilisez Vue cli 3, seules les variables qui commencent par VUE_APP_ seront chargées.

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).

Mise à jour

Selon @ali6p, avec Vue Cli 3, il n'est pas nécessaire d'installer la dépendance dotenv.

Answer 3

1. Créez deux fichiers dans le dossier Root (à côté de package.json) .env et .env.production
2. Ajoutez des variables à ces fichiers avec le préfixe VUE_APP_ eg : VUE_APP_WHATEVERYOUWANT
3. servir utilise .env et construire utilise .env.production
4. Dans vos composants (vue ou js), utilisez process.env.VUE_APP_WHATEVERYOUWANT pour appeler la valeur
5. N'oubliez pas de redémarrer servir s'il est en cours d'exécution
6. Effacer le cache du navigateur

Vérifiez que vous utilisez la version 3 ou supérieure de vue-cli.

Pour plus d'informations : https://cli.vuejs.org/guide/mode-and-env.html

Answer 4

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

• .env
• .env.certainEnvironnement1
• .env.quelqueEnvironnement2

Pour charger ensuite ces configurations, vous devez spécifier l'environnement via mode c'est-à-dire

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

Dans votre env vous déclarez simplement la configuration sous forme de paires clé-valeur, mais si vous utilisez Vue 3, il faut doit préfixe avec VUE_APP_ :

Dans votre .env :

VUE_APP_TITLE=This will get overwritten if more specific available

.env.certainEnvironnement1 :

VUE_APP_TITLE=My App (someEnvironment1)

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

monComposant.vue :

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

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

Maintenant, si vous exécutez l'application sans une mode le message "This will get..." s'affichera, mais si vous spécifiez un nom d'utilisateur et un mot de passe, le message "This will get..." s'affichera. someEnvironment1 comme votre mode puis vous obtiendrez le titre à partir de là.

Vous pouvez créer des configurations qui sont "cachées" de git en ajoutant le texte suivant .local à votre fichier : .env.someEnvironment1.local - très utile pour quand vous avez des secrets.

Lire les docs pour plus d'informations.

Answer 5

Un problème que je rencontrais était que J'ai utilisé l'installation de webpack-simple. pour VueJS qui ne semblait pas inclure un dossier de configuration des variables d'environnement. Je n'ai donc pas pu modifier les fichiers de configuration env.test,development, et production.js. Les créer n'a pas aidé non plus.

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

Pour que les variables d'environnement fonctionnent, le fichier webpack.config.js doit contenir les éléments suivants en bas de page

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 procéder, mais si vous souhaitez utiliser les variables d'environnement dans le cadre du développement, vous devez procéder 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 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 également noter que vous semblez avoir besoin des guillemets doubles "''" pour une raison quelconque.

Donc, dans le domaine du développement Je peux maintenant accéder à ces variables d'environnement :

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

Voici l'ensemble du webpack.config.js, juste pour le 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'"
      }
    })
  ]);

}