1. プロセスとは

プロセスオブジェクトは、現在の Node.js プロセスに関する情報を提供し、それを制御するグローバル変数です。Vue プロジェクトで環境を区別するためによく使用されます。たとえば、グローバル変数に基づくリクエストの URL アドレスの区別、eslint を開始するかどうか、環境ごとに特別な設定など、環境ごとに設定が異なります。

プロジェクト内に新しいjsファイルを作成し、処理を出力し、設定オブジェクトを取得できます。数が多すぎる場合は、いくつかのスクリーンショットのみが表示されます。

2. プロセスを使用して環境を区別する方法

Vue プロジェクトには、実稼働、開発、テストの 3 つのモードがあります。

1.モード

モードは vue-cli の重要な概念であり、デフォルトで 3 つのモードがあります。

以下で説明するコマンドについては、プロジェクト内の package.json ファイルを見ると、一目で理解できます。

開発モードは vue-cli-service サーブに使用されます

Production モードは、vue-cli-service build および vue-cli-service test:unit に使用されます。

テストモードは vue-cli-service test:unit に使用されます

開発環境で開発モードに対応するコマンドはserveコマンドです。これは、プロジェクトの開始後に開発モードで実行することを意味します。

実稼働モードは、パッケージ化コマンドの build に対応します。パッケージ化して本番モードで実行する

--mode オプション引数を渡すことで、コマンドラインのデフォルトモードをオーバーライドできます。たとえば、ビルドコマンドで開発環境変数を使用する場合は、次のようにします。

vue-cli-service build --mode 開発

要約すると、コマンドを使用して動的に構成し、モード内の対応する構成を構成できます。

リクエストアドレスは.envファイルで設定するのが一般的ですが、例えば複数のアドレスがある場合でもコマンドで柔軟に設定できます。

2.process.env環境オブジェクト

異なるモードには異なる環境変数が存在します

開発モードでは、NODE_ENV の値は「開発」に設定され、
実稼働モードでは、NODE_ENV の値は「実稼働」に設定されます。

3. envファイルの実行順序

.env は、開発環境と運用環境の両方にロードされる構成ファイルです
。 env.development は、開発環境にロードされる構成ファイルです
。 env.production は、運用環境にロードされる構成ファイルです。

研究開発環境の読み込み順序: .env .env.development. 同じ変数名であれば、後者が前者を上書きします
本番環境の読み込み順序: .env .env.production. 同じ変数名であれば、後者が前者を上書きします。

3. プロセスの使用

1. 異なる環境でリクエストアドレスを区別するために使用されます。

.env.development などの新しい .env ファイルを作成すると、ファイル内で宣言された変数が開発環境にロードされます。

VUE_APP_ で始まる変数は、webpack .definePlugin によってクライアント側のパッケージに静的に埋め込まれます。process.env.VUE_APP_SECRET にアクセスするときに、変数を VUE_APP_* の形式で直接追加します。

# 単なるフラグ
NODE_ENV = '開発'

# ベース API
VUE_APP_BASE_API = 'http://10.0.0.165:9588'

次に、URL をリクエストすると、対応する値を取得できます。

const service=axios.create({
    baseURL: process.env.VUE_APP_BASE_API,//请求地址
    timeout: 10000,//请求超时时间，如果超给改时间会中断
    // headers: {'X-Custom-Header': 'foobar'}//自定义请求头
})

Vueプロジェクトにおけるグローバル変数処理の利用分析