web-dev-qa-db-ger.com

Ruft die Variable config und env in der vue-Komponente ab

Ich habe eine Vue-Komponente in meiner Anwendung Laravel.

Ich möchte eine URL, die sich in einer config-Datei (oder in der .env Laravel -Datei) befindet, direkt in meiner Vue-Komponente abrufen, anstatt sie fest zu kodieren. Im Webpack-Laravel-Mix kann ich meine abrufen. Env-Variable wie diese.

require('dotenv').config() let proxyUrl = process.env.APP_URL

Aber wenn ich dies in meiner app.js machen möchte, habe ich einen can't resolve fs, wenn ich versuche, dotenv zu benötigen.

Was ist der beste Weg, um diese Daten in meinen Vue-Komponenten zur Verfügung zu haben?

javascriptphplaravelwebpackvue.js
4
Komarzer

Ich hatte das gleiche Problem, aber das Platzieren der Variablen in Blade war keine Option für mich, es bedeutete auch, eine Variable in einer Blade-Datei zu deklarieren und dann in einer Javascript-Datei zu verwenden, die ein wenig unorganisiert erscheint. Wenn Sie also in dieser Position sind, denke ich, gibt es eine bessere Lösung. Wenn Sie Vue verwenden, kompilieren Sie Ihre Dateien wahrscheinlich mit Laravel mix.

Wenn dies der Fall ist, können Sie Umgebungsvariablen in Mix einfügen. Sie müssen lediglich das Präfix MIX_ hinzufügen. So können Sie Ihrer .env-Datei eine Variable hinzufügen wie:

MIX_SENTRY_DSN_PUBLIC=http://example.com

und greifen Sie dann in Ihrer Javascript-Datei auf diese Variable zu:

process.env.MIX_SENTRY_DSN_PUBLIC

sie können darauf überall in Ihrer Pre-Compile-Datei zugreifen. Sie finden diese Informationen in der Laravel-Dokumentation. https://laravel.com/docs/5.6/mix#environment-variables

5
Eli

Um auf Ihre Env-Variablen in einer Vue Component-Datei in Laravel zuzugreifen, müssen Sie Ihrer Variablen MIX_ voranstellen.

In der .env-Datei

Beispiel: Wenn Sie APP_URL als Variable in Ihrer .env-Datei anstelle von APP_URL verwenden möchten, sollten Sie MIX_APP_URL like verwenden :

MIX_APP_URL=http://example.com

In Ihrer Vue Component-Datei

Sie greifen dann auf die Variable zu, indem Sie das process.env -Objekt in Ihrem Skript wie folgt verwenden: 

process.env.MIX_APP_URL

Angenommen, Sie setzen heute eine Eigenschaft mit dem Namen proxyUrl und weisen die Variable als Wert zu. In Ihrem Skript in der .vue-Datei sollte der Code folgendermaßen aussehen:

export default {
  data () {
        return {
          proxyUrl: process.env.MIX_APP_URL,
        },
  }
}

Danach sollten Sie die Eigenschaft in der Vue-Vorlage wie gewohnt abrufen können:

<template>
    <div>

        //To print the value out
        <p>{{proxyUrl}}</p>

        // To access proxyUrl and bind it to an attribute
        <div :url='proxyUrl'>Example as an attribute</div>
    </div>
</template>

Hier ist das offizielle Dokument, das in Laravel 5.6 veröffentlicht wurde, falls Sie einen Blick darauf werfen möchten.

6
UX Andre

Sie können dies in der Blade-Vorlage tun:

let window.something = {{ config('seme_config.something') }}

Dann verwenden Sie einfach die Variable in JS mit:

window.something

Außerdem sollten Sie den env() Helper nicht direkt verwenden. Extrahieren Sie nur Daten aus der Konfigurationsdatei.

2
Alexey Mezenin

WICHTIG

Sie müssen das Bundle erneut laden, damit die Änderungen wirksam werden.

Meins funktionierte nicht, bis ich das Dev-Bundle getötet und npm run watch erneut ausgeführt habe.

0
agm1984