Nuxt.jsでは本番での運用方式によって、アプリケーションをビルドする際にいくつかコマンドが用意されていますが、大きくは、サーバーサイドレンダリング（SSR）をするかしないかに分かれます。その際にSSRをしない場合に「generate」という形で全て静的HTMLで生成されることになります。   この時にローカルでビルドしたアプリケーションで、axiosを使ってプロジェクト内のstaticフォルダにあるリソースを読み込んでいると、APIのURL先がlocalhostとなり、ビルドされたファイルをそのまま本番環境にあげるとCORS（オリジン間リソース共有）の問題でブラウザ上ではデータを取得することができなくなってしまいます。   SSRありの場合には本番のNode.js環境下で「nuxt start」とサーバーを起動することができ、それにあわせて環境変数も切り分けられますが「generate」の場合、そのようなことができません。そこで、Nuxt.jsで環境変数を管理する時に使える「dotenv」モジュールで環境変数を管理していきます。   まずは「dotenv」モジュールをプロジェクトに追加していきます。node_modulesフォルダがあるプロジェクト内で下記のコマンドを実行します。

$ yarn add @nuxtjs/dotenv
 or 
$ npm install @nuxtjs/dotenv

  インストールが完了すると「package.json」のdependenciesにモジュールが追加されているのが確認できます。 【package.json】※一部抜粋

{
 "dependencies": {
  .......
  "@nuxtjs/dotenv": "^1.4.0",
  .......
 }
}

  モジュールとして使うには「nuxt.config.js」の「modules」セクションに追記する必要があります。そして、下記のようにファイル先頭にrequire()も追加しておきます。 【nuxt.config.js】

require('dotenv').config()

export default {
 .......
 modules: [
  '@nuxtjs/dotenv'
 ],
 .......
}

  また、環境変数を情報として取得する場合にはNode.js環境下以外だと、同じく「nuxt.config.js」に下記のような設定が必要になるようです。こうすることで、「process.env.*******」の形で、環境変数を参照することができるようになります。 【nuxt.config.js】

export default {
 .......
 env: {
  BASE_URL: process.env.FRONT_API_URL
 },
 .......
}

  次に、dotenvで使う環境変数を記録するファイルを作成します。この時ファイル名は「.env」という名前でプロジェクトルート直下に保存しておきます。下記コマンドでサクッと作ってしまいましょう。

$ cd [Nuxt.jsプロジェクトディレクトリ]
$ touch .env

  「.env」ファイルができたら、そのファイル内に各環境変数として設定するURLを入れていきます。ここでは「開発環境」「ステージング環境」「本番環境」と分けています。.envファイル内では＃をつけることでコメントアウトできます。不要なものはコメントアウトしておきます。 【.env】

# 本番環境用API
BASE_URL = https://example.com/api/
# ステージング環境用API
# BASE_URL = https://staging.example.com/api/
# 開発環境用API
# BASE_URL = http://localhost:3000

  上記の例では、本番環境のURLが環境変数として設定される形になります。これでアプリケーションをgenerateコマンドを使ってローカル環境でビルドしても、「.env」で指定した環境変数が適用されるようになります。  

---

  ベストプラクティスあるいは本来の正しい使い方かどうかわかりませんが、、とりあえず解決したので良かったです。忘れないように備忘録として残しておきたいと思います。   （参考にさせて頂いたサイト） Nuxt.js で dotenv を活用する