Nuxt.js 2.6.2 / axios 5.0.0 で、axios の deafaults.baseUrl を設定するハナシ

前段

vuex の actions 内で this.$axios を使ってAPIを叩きたい。

エンドポイントは環境ごとに分けたい。

- local : http://localhost:3000/api
- production : http://hogehoge.jp/api

しかし、現在ローカルでは

  axios: {
    host: 'localhost',
    port: 3000,
    prefix: '/api'
    // See https://github.com/nuxt-community/axios-module#options
  },

と定義していた。

環境ごとにエンドポイントの設定を分ける方法として、 @nuxtjs/dotenv を導入する。

/package.json

  "dependencies": {
    "@nuxtjs/dotenv": "^1.3.0",
  },

ruby on rails でも同じ名前の Gem があるね。

/nuxt.config.js の頭に下記定義を追加。

require('dotenv').config()

/nuxt.config.js のmodulesにも追加。

  modules: [
    '@nuxtjs/dotenv',
    '@nuxtjs/axios'
  ],

/.env ファイルを用意することで、環境変数を定義することが出来る。

API_URL=http://localhost:3000/api

環境変数に API_URL が定義してあれば、 axios の defaults.baseUrl に自動で設定してくれる。

あとは、本番環境でも同様に環境変数を指定してあげれば良さそう。

初め何かで見た下記のような定義をしていて、エンドポイントが設定されなくて（デフォルトの http://localhost:3000/ のままで）ハマった。

  axios: {
    baseURL: process.env.baseUrl
  },

この定義は特に必要なく、 '@nuxtjs/axios' では環境変数に API_URL を定義しておけば自動で設定してくれる。

やっぱソースを読むの大事。

個人的にはドキュメントを読むよりも大事なのではと思ったり思わなかったりｗ