みなさんこんにちは！
イザナギです！
npm i @nuxtjs/axios
axios: { baseURL: process.env.BASE_URL || '/' },
heroku config:set API_URL=$(heroku info -s | grep web_url | cut -d= -f2)
まあ、予想通りなのですが、反映されていませんでした。
コードがおかしい（これが原因！）
結果を言えば、これが原因でした。
私は現状、非同期通信して得たデータを「vuex-persistedstate」を使ってstoreに格納してリロードしてもデータを消えないようにしています。
その非同期通信を実行していたのが、Nuxtの「fetch メソッド」でした。
Deploy Nuxt on Heroku
ネットで調べても、Nuxtの「fetch メソッド」で行っている記事を見つけたので、採用していました。
結果、ローカル環境では実行できたのですが、Herokuに上げた途端実行されていませんでした。
なので、Nuxtの「fetch メソッド」を他のメソッドに変えてみることにしました。
私はNuxtのライフサイクルである「created」で実行できるようにしました。
そうしたところ、HerokuでもAPIのデータを取れるようになりました！
やっとできたー！
原因を考察
まず一つとして、ローカル環境でしか開発していなかったのでが、原因だと考えられます。
やはり、本番環境に適したもので開発を行えば良かったと感じております。
二つ目として、Nuxtの理解が足りなかったという点ですね。
Nuxtの「fetch メソッド」を使って開発していたのですが、本番環境ではAPIのデータを取得できませんでした。
これは、Nuxtのライフサイクルや「fetch メソッド」「asyncDataメソッド」などへの理解が足りていなかったためだと思います。
なので、これからは理解も深めていきたいと思います！
まとめ
今回は、NuxtをHerokuでデプロイした時のAPIデータが取得できなかった時の対処法について書いてきました。
初めは、env（環境変数）が適応されていないのかなと思いましたが、APIのデータが取れていないだけでした。
やはりまだ、Nuxtの理解を深められてない！
なので、これからも勉強していきたいと思います。
それでは、今回はここで筆を置かせていただきます！
最後まで記事をご覧いただきあろがとうございました！