web-dev-qa-db-ja.com

Vue-cli 3環境変数はすべて未定義

私はそこにあるすべての解決策を試しましたが、どれもうまくいかないようです。 Vueアプリ内の_.env_ファイルにいくつかの値を格納したいだけですが、_process.env_をログに記録しようとすると、コンポーネント内から空のオブジェクトが返されます。

私の_.env_ファイル

_VUE_APP_URL={api url}
VUE_APP_TOKEN={token}
_

私の計画は、これらの環境変数をデータプロパティに設定することでしたが、常にundefinedを返します。 webpack.config.jsからconsole.log(process.env.NODE_ENV)を実行すると、開発中であることが示されますが、コンポーネント内から同じように実行しようとした場合

_mounted() {
    this.$nextTick(() => {
      console.log(process.env.VUE_APP_URL);
    })
  }
_

undefinedを返すだけです。

vue.jsvuejs2environment-variablesvue-clivue-cli-3
8
Dylan Nguyen

私はそれを理解しました-私はインストールする必要がありましたdotenv-webpackとwebpack.config.jsで初期化します。これは、私がそうする必要があるとドキュメントで説明されていないためです。

7
Dylan Nguyen

ここに着陸する人々のためのいくつかのヒント：

  1. .envファイルがプロジェクトのルートフォルダであることを確認してください（たとえば、src/ではありません）
  2. 変数名は次で始まる必要がありますVUE_APP_クライアントバンドルに静的に埋め込む場合
  3. Restart開発サーバー、またはプロジェクトをビルドして変更を有効にします。
17
M3RS

あなたのvue-cliversionがよりも高い場合3。 xそして、コメントで言ったように、.envファイルをルートディレクトリに置きます。コンポーネント（この_process.env.VUE_APP_YOUR_VARIABLE_など）から環境変数にアクセスできます。 vue-cli docs で述べたように

_VUE_APP__で始まる変数のみが、_webpack.DefinePlugin_でクライアントバンドルに静的に埋め込まれます。あなたはあなたのアプリケーションコードでそれらにアクセスすることができます：console.log(process.env.VUE_APP_SECRET)

7
bakhti_UZB

vUE_APP_API_URL（これは機能しません）を使用してから、VUE_APP_APIURL（これは機能します）に変更します

それが役に立てば幸い

1
IwanC