Vue.jsのコンフィグの記述方法

プログラミング
この記事は約2分で読めます。
記事内に広告が含まれます。

Vue.jsではコンフィグは[.env]ファイルで行います
Vueコード内で扱うにはプレフィックスとして「VUEAPP」とする必要があります

$ vi .env
VUE_APP_URL=http://www.sample-hoge.com
VUE_APP_XXXX=XXXXXXXXX

そして、このコンフィグをコード内から利用するには

let url = process.env.VUE_APP_URL
console.log(VUE_APP_XXXX)

のように記述します。

DevelopやProductionのように環境によって値を変える場合は下のようにファイル名を環境じ合わせて記述します。
上から順に参照されますので、あとに宣言された値で上書きされます。

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

※modeは標準で以下のようなものがあります「development」「test」「production」

.envファイルを更新した場合は
再コンパイルが必要です。

$ npm run serve などで再コンパイルして確認してください。

コメント

タイトルとURLをコピーしました