web-dev-qa-db-fra.com

Récupérer les composants config et env dans le composant vue

J'ai un composant Vue dans mon application Laravel.

Je veux récupérer une URL qui se trouve dans une config (ou le fichier .env Laravel]) directement dans mon composant Vue, au lieu de la coder en dur. variable env comme ça.

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

Mais quand je veux faire cela dans mon app.js, j'ai un can't resolve fs lorsque j'essaie de requérir dotenv.

Quel est le meilleur moyen d'avoir ces données disponibles dans mes composants Vue?

javascriptphplaravelwebpackvue.js
4
Komarzer

J'avais le même problème, mais placer la variable dans la lame n'était pas une option pour moi, cela signifiait aussi avoir une variable déclarer dans un fichier lame et l'utiliser ensuite dans un fichier javascript qui semblait un peu désorganisé. Donc, si vous êtes dans la même situation, alors je pense qu'il existe une meilleure solution. Si vous utilisez Vue, vous compilerez probablement vos fichiers avec Laravel mix.

Si tel est le cas, vous pouvez injecter des variables d’environnement dans Mix, il vous suffit d’ajouter le préfixe MIX_. Vous pouvez donc ajouter à votre fichier .env une variable telle que:

MIX_SENTRY_DSN_PUBLIC=http://example.com

puis accédez à cette variable comme ceci dans votre fichier javascript:

process.env.MIX_SENTRY_DSN_PUBLIC

vous pouvez y accéder n'importe où dans votre fichier de pré-compilation. Vous pouvez trouver cette information dans la documentation de laravel. https://laravel.com/docs/5.6/mix#environment-variables

5
Eli

Pour accéder à vos variables env dans un fichier Vue Component dans Laravel, vous devez préfixer votre variable avec MIX_ .

Dans le fichier .env

Pour prendre votre cas comme exemple, si vous avez l'intention d'utiliser APP_URL comme variable dans votre fichier .env, au lieu de APP_URL, vous devez utiliser MIX_APP_URL comme :

MIX_APP_URL=http://example.com

Dans votre fichier Vue Component

Vous accédez ensuite à la variable à l'aide de l'objet process.env de votre script, comme suit: 

process.env.MIX_APP_URL

Supposons aujourd'hui que vous définissiez une propriété nommée proxyUrl et que vous affectiez la variable à sa valeur. Dans votre script du fichier .vue, le code devrait ressembler à ceci:

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

Après cela, vous devriez pouvoir récupérer la propriété dans votre modèle de vue comme d'habitude:

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

Voici le doc officiel publié dans Laravel 5.6 , au cas où vous souhaiteriez jeter un coup d'œil.

6
UX Andre

Vous pouvez le faire dans le modèle de lame:

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

Ensuite, utilisez simplement la variable dans JS avec:

window.something

De plus, vous ne devriez pas utiliser directement env() helper. Extraire les données du fichier de configuration uniquement.

2
Alexey Mezenin

IMPORTANT

Vous devez recharger le paquet pour que les modifications prennent effet.

Le mien ne fonctionnait pas jusqu'à ce que j'ai tué le bundle de développement et rediffusé npm run watch.

0
agm1984