[解決済み] Vue.jsで環境変数を使用する

質問

公式ドキュメントを読んでいますが、環境変数に関するものが見当たりません。どうやら、環境変数をサポートするコミュニティ・プロジェクトがあるようですが、これは私にとっては過剰な作業かもしれません。そこで、Vue CLIで作成されたプロジェクトで作業するときにネイティブに動作する、箱から出してすぐに使える簡単なものがないかと考えています。

例えば、以下のようにすると、正しい環境が出力されることがわかりますが、これはすでに設定されているということでしょうか？

mounted() {
  console.log(process.env.ROOT_API)
}

私はenv変数とNodeにちょっと慣れていないんです。

参考までに、Vue CLI バージョン 3.0 beta を使用しています。

解決方法は？

Webpackテンプレート（デフォルト設定）でvue cliを使用する場合、.envファイルに環境変数を作成して追加することができます。

変数は自動的に process.env.variableName をプロジェクトに追加します。ロードされた変数は、すべてのvue-cli-serviceコマンド、プラグイン、依存関係からも利用可能です。

いくつかのオプションがありますが、これは 環境変数とモードに関する文書 :

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

.envファイルは次のようになります。

VUE_APP_MY_ENV_VARIABLE=value
VUE_APP_ANOTHER_VARIABLE=value

私の理解では、.envファイルを作成し、変数を追加すれば準備完了です! :)

下のコメントにある通りです。 Vue cli 3 を使用している場合、以下のような変数のみが使用可能です。 VUE_APP_ が読み込まれます。

を再起動することを忘れないでください。 サーブ を実行中である場合。