web-dev-qa-db-ja.com

本番モードまたは開発モードに応じて異なる.envファイルを読み取る方法は？

私はVueとwebpackを使用しており、本番環境または開発用にビルドするようにwebpackに指示する環境変数を使用しています。

これは機能しています：

NODE_ENV=production webpack

console.log(process.env)

ただし、 このドキュメントで説明されています 本番モードまたは開発モードに応じて異なる.envファイルを使用して、アプリの変数を変更できます。

。envファイル

VUE_APP_ROOT=http://localhost:8000/
VUE_APP_BASE_URL=http://localhost:8000/api/

。env.prodファイル

VUE_APP_ROOT=http://realaddress/
VUE_APP_BASE_URL=http://realaddress/api/

しかし、これらの.envファイルにアクセスする方法がわかりませんか？どうやらこれはvue-cliを使用すると機能しますが、私のアプリではこれは未定義のログになります。

console.log("environment variables")
console.log(process.env.VUE_APP_ROOT)
console.log(process.env.VUE_APP_BASE_URL)

.envを使用せずに、本番モードに応じて異なるvue-cliファイルにアクセスするにはどうすればよいですか？

webpackvue.jsvue-cli
5
Kokodoko

dotenv プラグインを使用できます。

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

環境に基づいてファイルをロードするには、process.env.NODE_ENVを活用できます。

// webpack.config.js
const Dotenv = require('dotenv-webpack');
const env = process.env.NODE_ENV;

module.exports = {
  ...
  plugins: [
    new Dotenv({
      path: `./.env.${env === "production" ? "prd" : "dev"}`,
    })
  ]
  ...
};

これでvue-cliが同様のことをしているのを見ることができます repo

2
loveky