web-dev-qa-db-ja.com

vueコンポーネントの構成と環境変数を取得します

Vueコンポーネントが私のLaravelアプリケーションにあります。

構成（または.env Laravelファイル）にあるURLを、ハードコーディングするのではなく、直接Vueコンポーネントで取得します。Webpackでlaravel mixこのように.env変数を取得できます。

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

しかし、これを自分のapp.jsで実行したい場合は、can't resolve fs dotenvを要求しようとした場合。

このデータをmy Vueコンポーネントで利用できるようにする最良の方法は何ですか？

javascriptphplaravelwebpackvue.js
7
Komarzer

私はこれと同じ問題を抱えていましたが、変数をブレードに配置することは私の選択肢ではありませんでした。また、変数をブレードファイルで宣言し、少し整理されていないように見えるJavaScriptファイルで使用することも意味しました。あなたがこの同じ立場にいるなら、私はもっと良い解決策があると思います。 Vueを使用している場合は、おそらくLaravel mixを使用してファイルをコンパイルしています。

これが環境変数をMixに注入できる場合は、プレフィックスMIX_を追加するだけです。したがって、.envファイルに次のような変数を追加できます。

MIX_SENTRY_DSN_PUBLIC=http://example.com

次に、JavaScriptファイルで次のようにこの変数にアクセスします。

process.env.MIX_SENTRY_DSN_PUBLIC

これには、プリコンパイルファイル内のどこからでもアクセスできます。この情報は、laravelのドキュメントに記載されています。 https://laravel.com/docs/5.6/mix#environment-variables

8
Eli

Vue Laravelのコンポーネントファイル）で環境変数にアクセスするには、変数の前にMIX _を付ける必要があります。

.envファイル

例として、APP_URLの代わりにAPP_URLを.envファイルの変数として使用する場合、次のようにMIX_APP_URLを使用する必要があります。

MIX_APP_URL=http://example.com

あなたのVue Component file

次に、次のようにスクリプト内でprocess.envオブジェクトを使用して変数にアクセスします。

process.env.MIX_APP_URL

今日、proxyUrlという名前のプロパティを設定し、変数をその値として割り当てます。vueファイルのスクリプトで、コードは次のようになります。

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

その後、vueテンプレートのプロパティを通常どおり次のように取得できるはずです。

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

ご覧になりたい場合のために、ここに Laravel 6.x でリリースされた公式ドキュメントがあります。

10
UX Andre

重要

変更を有効にするには、バンドルをリロードする必要があります。

鉱山は、devバンドルを終了して再実行するまで機能しませんでしたnpm run watch。

2
agm1984

あなたはブレードテンプレートでこれを行うことができます：

_let window.something = {{ config('seme_config.something') }}
_

次に、JSで変数を次のように使用します。

_window.something
_

また、env()ヘルパーを直接使用しないでください。構成ファイルからのみデータを抽出します。

2
Alexey Mezenin