vue.jsでAPIキーなどを隠しファイルで管理するには

フロントエンド

Written by:

vue.jsの場合も公開したくないキーなどにかんしては.envファイルに記載して参照する形をとります

.envファイルはアプリのルートディレクトリに置き、下記のように変数を記載します

VUE_APP_XXX = xxxxxxx

で、実際のアプリ側でどう読み込むかというとこのように記載しビルドし直して再起動する必要があるようです

console.log(process.env.VUE_APP_MY_API_KEY)

ビルドし直す時はこれ

$ yarn build

新しい変数を定義したら毎回ビルドし直さないといけないのは面倒ですね・・・

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です