vue-cli3系を使ってvue.jsアプリケーションで環境変数を扱う

Vue.js + Firebaseでアプリケーションを作ってみようと思ったのですが、どうにも環境変数周りでハマってしまったので、今回は環境変数の扱いのみやります。

vue-cliのバージョンを確認。2系が入ってるみたい。公式ドキュメントは3系の方が豊富に見えたので3系でやります。

$ vue --version
2.9.6

古いvue-cliをアンインストール。

$ npm uninstall vue-cli -g

新しいvue-cliをインストール。

npm install -g @vue/cli

んー。Node.jsもアップグレードせないかんのか。めんどくさ。

$ vue --version
You are using Node v8.4.0, but this version of vue-cli requires Node >=8.9.
Please upgrade your Node version.

stable版で10.8.0

$ n --stable
mkdir: /usr/local/n/versions/node: Permission denied
mkdir: /usr/local/n/versions/io: Permission denied
10.8.0

stableで十分なので、stableをインストールする。

$ sudo n stable

よし3系が入ったぞ!

$ vue --version
3.0.1

アプリケーションのテンプレを作る。なんかvue-cli2系の記事はvue initを使っているケースが多かったけど、それだと今回の環境変数を切り分けるのがうまくいかなかった。

公式ドキュメントにしたがい、vue createの方を使う。いろいろ聞かれるがとりあえず全部デフォでOKしていく。

$ vue create todo-vue-cli3

アプリケーションを起動。

$ yarn serve

とりあえず起動は出来た

スクリーンショット

環境変数

公式ドキュメントに書いてあるように、頭にVUE_APP_をつけた環境変数しか有効にならない。

Environment Variables and Modes Vue CLI 3

.env

FOO=foo
SECRET=secret
VUE_APP_FOO=vue_app_foo
VUE_APP_SECRET=vue_app_secret

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

console.log(process.env.FOO)
console.log(process.env.SECRET)
console.log(process.env.VUE_APP_SECRET)
console.log(process.env.VUE_APP_FOO)

new Vue({
  render: h => h(App)
}).$mount('#app')

chromeのコンソールではこの様になる

[HMR] Waiting for update signal from WDS...
undefined
undefined
vue_app_secret
vue_app_foo
Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools

公式ドキュメントによると.env.localも使えるようだ。これはgitignoreに追加しておいて、各自のローカルのみ有効にしたい環境変数を定義したい場合に使う。

.env.local

FOO=foo2
SECRET=secret2
VUE_APP_FOO=vue_app_foo2
VUE_APP_SECRET=vue_app_secret2

結果。.env.localの方の環境変数で上書きされているのが分かる。

[HMR] Waiting for update signal from WDS...
undefined
undefined
vue_app_secret2
vue_app_foo2
Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools

vue-cli3系での環境変数の使い方を把握したので、次はVue.js + Firebaseをやってみたい。



mofmof inc. 採用情報

mofmof inc.では、一緒に仕事をしてくださるエンジニアを募集しております。
募集要項については以下をご確認ください。
興味を持っていただけましたら、ぜひ一度ゆっくりお話出来れば嬉しいです。

mofmofは何をしたいのか
https://www.mof-mof.co.jp/recruit/want-to-do