Vue-CLI3で環境変数.env.localを使う

dockerで手元にapiサーバー立ててる人もいれば、外部apiサーバーを見に行く場合もあったり、
書き換えて間違えてコミットしちゃったりして混乱する。そういう時に便利な.envファイル。

まず.envは.gitignoreに書く。

.gitignore

# local env files
.env.local

Vue-CLI3のプロジェクト直下に「.env.local」を置く

.env.local

VUE_APP_ENV=localhost

store.js

getQuery: function(){
      var self = this;
      if(process.env.VUE_APP_ENV=='localhost'){
        self.commit('updateAPI', 'http://127.0.0.1:8001/api/v1/hoge?query') //docker
      }else if(process.env.VUE_APP_ENV=='dev'){
        self.commit('updateAPI', 'https://api.devserver.com/api/v1/hoge?query') //外部
      }
},

これでlocalサーバー立てても、ソースに影響ないです。