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コンポーネントで利用できるようにする最良の方法は何ですか?
私はこれと同じ問題を抱えていましたが、変数をブレードに配置することは私の選択肢ではありませんでした。また、変数をブレードファイルで宣言し、少し整理されていないように見える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
Vue Laravelのコンポーネントファイル)で環境変数にアクセスするには、変数の前にMIX _を付ける必要があります。
例として、APP_URLの代わりにAPP_URLを.envファイルの変数として使用する場合、次のようにMIX_APP_URLを使用する必要があります。
MIX_APP_URL=http://example.com
次に、次のようにスクリプト内で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 でリリースされた公式ドキュメントがあります。
重要
変更を有効にするには、バンドルをリロードする必要があります。
鉱山は、devバンドルを終了して再実行するまで機能しませんでしたnpm run watch
。
あなたはブレードテンプレートでこれを行うことができます:
_let window.something = {{ config('seme_config.something') }}
_
次に、JSで変数を次のように使用します。
_window.something
_
また、env()
ヘルパーを直接使用しないでください。構成ファイルからのみデータを抽出します。