web-dev-qa-db-ja.com

nuxt.config.jsで環境変数を使用する

私はNuxt＆Axiosを使用していますが、buildingアプリケーションをローカルマシンからアプリケーション。

この問題を修正するために@ nuxtjs/dotenvモジュールをインストールしましたが、まだ問題は解決していません。

注：ホスティングプロバイダー環境でアプリをビルドすると、環境変数は正常に機能します。問題を起こすのは、私のローカルマシンからのビルドだけです。私のIDEはVSコードです。

これがnuxt.config.js内の私のaxiosセットアップです：

module.exports = {
  ...
  buildModules: [
    '@nuxtjs/dotenv'
  ],
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios'
  ],
  axios: {
    baseURL: process.env.BASE_URL
  },
  ...
}

私の.envファイルには次のものが含まれています。

BASE_URL="https://some.api.com"

アプリのビルド時に.env変数が認識されません：

nuxt build

代わりに、サーバーがデフォルトで実行するのと同じHost：portにaxiosベースURLを設定するだけです。例：localhost：4000

@ nuxtjs/dotenvモジュールから次のドキュメントを見つけました： https://github.com/nuxt-community/dotenv-module#using-env-file-in-nuxtconfigjs 。これにより、nuxt.config.jsの先頭に以下を追加するように指示されます。

require('dotenv').config()

これはローカルでのビルドに有効です。 .envからの変数が認識されます！ただし、dotenvはdevの依存関係であるため、モジュールが認識されないため、ホスティングプロバイダーにデプロイするとビルドがクラッシュします。

私は次のようにビルドコマンドで直接環境変数を定義できることを知っていますが、そうしない方がいいです：

NUXT_ENV_BASE_URL=some.api.com nuxt build

ビルドプロセス中にnuxt.config.js内でローカルに動作する環境変数を取得する簡単な方法はありますか？

ありがとうございました！

node.jsaxiosenvironment-variablesnuxt.js
2
Ryan Toner

Devの依存関係として以下をインストールしました。 @ nuxtjs/dotenv。次に、nuxt.config.jsに以下を追加しました。私はこのインポートステートメントを見つけました 記事内 を試してみました。ありがたいことにそれは私のために働いた。

import dotenv from "dotenv";
dotenv.config();

env: {
  DB_Host: process.env.DB_Host
},

次の内容で.envというファイルを作成しました

DB_Host=http://localhost:5001/
1
Jeff Bluemel