VueフロントエンドとRailsバックエンドでenvvairablesを実装するにはどうすればよいですか?このタスクを完了するには、dotenvパッケージを使用する必要がありますか?

HaydenF

保護する必要のあるAPIキーがいくつかあるプロジェクトで作業を開始しました。私の個人的なプロジェクトはすべてReactとNodeを使用していますが、このプロジェクトは(私がよく知らない)yarnを使用して構築されています。私はyarn add dotenvすでに実行しました、そして私はそれを起動して実行するために彼らのドキュメントを使用しようとしました。すべてのconsole.log(process.env.***)リターンundefined

これまでの私の方法は、プロジェクトのルートにある.envファイルに変数を追加require('dotenv').config()し、application.jsロードするプロジェクトのファイルに追加することでした。Vue.js 3はdotenvを必要とせず、代わりに変数名の前に_VUE_APPを使用することを読みました(Vue 2.8でそのように機能しないことを確認しようとしました。スポイラー、そうではありません)。

私が見逃しているステップはありますか?まったく別のアプローチを取る必要がありますか?

前もって感謝します!

ダニエル・ジャラミロ

開発本番の2つの環境があるとしましょう

これらの環境の変数を使用するには、ルートフォルダー(package.jsonまたは.gitignore)に環境ごとに1つのファイルを作成し、1つのファイルを呼び出し、もう1つのファイルをと.env.development呼び.env.development、そこに変数を作成します。

たとえば、api-pathと呼ばれる1つの環境変数が必要であるとすると、VUE_APP_API_PATHと呼ばれる各ファイルに変数を作成します(たとえば、開発環境でVUE_APP_API_PATH = http://localhost:3000)。

次に、let API_route = process.env.VUE_APP_ROOT_APIこの値が必要なスクリプトでこれらの環境値を取得できます

詳細はこちら:https//cli.vuejs.org/guide/mode-and-env.html#environment-variables

それが役に立てば幸い。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ