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をやってみたい。
