☰

Vue-cli 3 環境変数がすべて未定義です 質問する

tag-icon • tag-icon vue.js vuejs2 environment-variables vue-cli vue-cli-3
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。

ベストアンサー1

ここを訪れる人へのヒントをいくつか紹介します。

  1. ファイル.envがプロジェクトのルートフォルダ内（そうではないsrc/）
  2. 変数名は次のように始まる必要があります VUE_APP_クライアントバンドルに静的に埋め込まれる場合
  3. 再起動変更を有効にするには、開発サーバーまたはプロジェクトをビルドしてください
  4. webpackベースのソリューションから移行する場合は、:(JSON configから)を=(に置き換えてください。dotenv 形式見逃しやすい
  5. ファイルへの変更が保存されていることを確認してください.env。
  6. 古いVueバージョンでは、環境変数はルートのファイルconfig/dev.env.jsではなく、例えばで定義されていました。.env

おすすめ記事