Verwenden von Umgebungsvariablen mit Vue.js.

Ich habe die offiziellen Dokumente gelesen und kann keine Informationen zu Umgebungsvariablen finden. Anscheinend gibt es einige Community-Projekte, die Umgebungsvariablen unterstützen, aber das könnte für mich übertrieben sein. Ich habe mich also gefragt, ob es etwas Einfaches gibt, das von Haus aus funktioniert, wenn ich an einem Projekt arbeite, das bereits mit Vue CLI erstellt wurde.

Zum Beispiel kann ich sehen, dass, wenn ich Folgendes tue, die richtige Umgebung ausgedruckt wird, was bedeutet, dass dies bereits eingerichtet ist?

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

Ich bin ein bisschen neu in env Variablen und Node.

Zu Ihrer Information mit Vue CLI Version 3.0 Beta.

Wenn Sie vue cli mit der Webpack-Vorlage (Standardkonfiguration) verwenden, können Sie Ihre Umgebungsvariablen erstellen und einer .env-Datei hinzufügen.

Auf die Variablen wird process.env.variableNamein Ihrem Projekt automatisch unter zugegriffen. Geladene Variablen stehen auch allen vue-cli-service-Befehlen, Plugins und Abhängigkeiten zur Verfügung.

Sie haben einige Optionen, die aus der Dokumentation zu Umgebungsvariablen und -modi stammen :

.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

Ihre .env-Datei sollte folgendermaßen aussehen:

VUE_APP_MY_ENV_VARIABLE=value
VUE_APP_ANOTHER_VARIABLE=value

Nach meinem Verständnis müssen Sie nur die .env-Datei erstellen und Ihre Variablen hinzufügen, dann können Sie loslegen! :) :)

Wie im Kommentar unten angegeben: Wenn Sie Vue cli 3 verwenden, werden nur Variablen geladen , die mit VUE_APP_ beginnen .

Vergessen Sie nicht, den Dienst neu zu starten , wenn er gerade ausgeführt wird.

Wenn Sie Vue cli 3 verwenden, werden nur Variablen geladen, die mit VUE_APP_ beginnen.

Erstellen Sie im Stammverzeichnis eine .env-Datei mit:

VUE_APP_ENV_VARIABLE=value

Und wenn es ausgeführt wird, müssen Sie den Serve neu starten , damit die neuen env-Variablen geladen werden können.

Auf diese Weise können Sie process.env.VUE_APP_ENV_VARIABLE in Ihrem Projekt verwenden (.js- und .vue-Dateien).

Aktualisieren

Laut @ ali6p ist es mit Vue Cli 3 nicht erforderlich, die dotenv-Abhängigkeit zu installieren.

1. Erstellen Sie zwei Dateien im Stammordner (in der Nähe von package.json) .envund.env.production
2. Fügen Sie diesen Dateien Variablen mit dem Präfix hinzu, VUE_APP_z. VUE_APP_WHATEVERYOUWANT
3. Verwendungen dienen.env und Verwendungen erstellen.env.production
4. Verwenden Sie process.env.VUE_APP_WHATEVERYOUWANTin Ihren Komponenten (vue oder js) den Wert
5. Vergessen Sie nicht, den Dienst neu zu starten , wenn er gerade ausgeführt wird
6. Browser-Cache löschen

Stellen Sie sicher, dass Sie vue-cli Version 3 oder höher verwenden

Für weitere Informationen: https://cli.vuejs.org/guide/mode-and-env.html

Erstellen Sie im Stammverzeichnis Ihres Projekts Ihre Umgebungsdateien:

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

Um diese Konfigurationen dann zu laden, würden Sie die Umgebung über modedh angeben

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

In Ihren envDateien deklarieren Sie die Konfiguration einfach als Schlüssel-Wert-Paare. Wenn Sie jedoch Vue 3 verwenden, müssen Sie Folgendes voranstellen VUE_APP_:

In Ihrer .env :

VUE_APP_TITLE=This will get overwritten if more specific available

.env.someEnvironment1:

VUE_APP_TITLE=My App (someEnvironment1)

Sie können dies dann in jeder Ihrer Komponenten verwenden über:

myComponent.vue:

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

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

Wenn Sie die App ohne eine ausgeführt modehaben, wird "Dies wird ..." angezeigt. Wenn Sie jedoch eine someEnvironment1als Ihre angeben, modeerhalten Sie den Titel von dort.

Sie können Konfigurationen erstellen, die vor Git "versteckt" sind, indem Sie sie .localan Ihre Datei anhängen :.env.someEnvironment1.local - Sehr nützlich, wenn Sie Geheimnisse haben.

Lesen Sie die Dokumente für weitere Informationen.

Ein Problem, auf das ich stieß, war, dass ich die webpack-einfache Installation für VueJS verwendete, die anscheinend keinen Konfigurationsordner für Umgebungsvariablen enthielt. Daher konnte ich die Konfigurationsdateien env.test, development und Production.js nicht bearbeiten. Sie zu erstellen hat auch nicht geholfen.

Andere Antworten waren für mich nicht detailliert genug, deshalb habe ich nur mit webpack.config.js "herumgespielt". Und das Folgende hat gut funktioniert.

Damit Umgebungsvariablen funktionieren, sollte die Datei webpack.config.js unten Folgendes enthalten:

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
    })
  ])
}

Basierend auf dem oben Gesagten könnten Sie in der Produktion die Variable NODE_ENV erhalten

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

Jetzt gibt es vielleicht bessere Möglichkeiten, dies zu tun, aber wenn Sie Umgebungsvariablen in der Entwicklung verwenden möchten, würden Sie Folgendes tun:

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

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

} 

Wenn Sie nun andere Variablen hinzufügen möchten, ist dies so einfach wie:

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'"
      }
    })
  ]);
}

Ich sollte auch beachten, dass Sie aus irgendeinem Grund die doppelten Anführungszeichen "''" zu benötigen scheinen.

Also, in Entwicklung , kann ich nun Zugriff auf diese Umgebungsvariablen:

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

Hier ist die gesamte webpack.config.js nur für einen bestimmten Kontext:

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'"
      }
    })
  ]);

}

So habe ich meine vue.config.js bearbeitet, damit ich NODE_ENV für das Frontend verfügbar machen kann (ich verwende Vue-CLI):

vue.config.js

const webpack = require('webpack');

// options: https://github.com/vuejs/vue-cli/blob/dev/docs/config.md
module.exports = {
    // default baseUrl of '/' won't resolve properly when app js is being served from non-root location
    baseUrl: './',
    outputDir: 'dist',
    configureWebpack: {
        plugins: [
            new webpack.DefinePlugin({
                // allow access to process.env from within the vue app
                'process.env': {
                    NODE_ENV: JSON.stringify(process.env.NODE_ENV)
                }
            })
        ]
    }
};

Wenn Sie zusätzlich zu den vorherigen Antworten auf VUE_APP_ * env-Variablen in Ihrem sass zugreifen möchten (entweder im sass-Abschnitt einer vue-Komponente oder in einer scss-Datei), können Sie Ihrer vue.config.js Folgendes hinzufügen ( die Sie möglicherweise erstellen müssen, wenn Sie keine haben):

let sav = "";
for (let e in process.env) {
    if (/VUE_APP_/i.test(e)) {
        sav += `$${e}: "${process.env[e]}";`;
    }
}

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: sav,
            },
        },
    },
}

Der String sav scheint jeder sass-Datei vor der Verarbeitung vorangestellt zu sein, was für Variablen in Ordnung ist. Sie können zu diesem Zeitpunkt auch Mixins importieren, um sie für den Sass-Bereich jeder Vue-Komponente verfügbar zu machen.

Sie können diese Variablen dann in Ihrem Sass-Abschnitt einer Vue-Datei verwenden:

<style lang="scss">
.MyDiv {
    margin: 1em 0 0 0;
    background-image: url($VUE_APP_CDN+"/MyImg.png");
}
</style>

oder in einer .scss-Datei:

.MyDiv {
    margin: 1em 0 0 0;
    background-image: url($VUE_APP_CDN+"/MyImg.png");
}

von https://www.matt-helps.com/post/expose-env-variables-vue-cli-sass/

In vue-cli Version 3:

Es gibt Optionen für .env-Dateien: Entweder können Sie verwenden .envoder:

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

Sie können benutzerdefinierte .envVariablen verwenden, indem Sie das Präfix Regex /^/anstelle von /^VUE_APP_/in verwenden/node_modules/@vue/cli-service/lib/util/resolveClientEnv.js:prefixRE

Dies wird sicherlich nicht empfohlen, um eine Open Source-App in verschiedenen Modi wie Testen, Entwickeln und Produzieren von .envDateien zu entwickeln. Denn jedes Mal npm install .., wenn Sie , wird es überschrieben.

Für diejenigen, die Vue CLI 3 und die webpack-einfache Installation verwenden, hat Aarons Antwort für mich funktioniert, aber ich war nicht daran interessiert, meine Umgebungsvariablen zu meinen hinzuzufügen, webpack.config.jsda ich sie für GitHub festschreiben wollte. Stattdessen habe ich das dotenv-webpack- Plugin installiert, und dies scheint Umgebungsvariablen gut aus einer .envDatei im Stammverzeichnis des Projekts zu laden, ohne dass VUE_APP_den Umgebungsvariablen vorangestellt werden muss.

Wichtig (in Vue 4 und wahrscheinlich auch in Vue 3+!): Ich habe VUE_APP_VAR festgelegt, konnte es jedoch NICHT durch den Konsolenprotokollierungsprozess und das Öffnen des env-Objekts sehen. Ich konnte es sehen, indem ich process.env.VUE_APP_VAR protokollierte oder referenzierte. Ich bin mir nicht sicher, warum das so ist, aber sei dir bewusst, dass du direkt auf die Variable zugreifen musst!