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

前段

vuexactions 内で 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の導入

環境ごとにエンドポイントの設定を分ける方法として、 @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 が定義してあれば、 axiosdefaults.baseUrl に自動で設定してくれる。

本番環境では

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

API_URL を定義しておけば良さそう

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

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

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

github.com

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

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

参考

nuxtでaxiosのhostの設定について - とろろこんぶろぐ