Vue CLI のモードと環境変数の詳細な説明

序文

実際のプロジェクトの開発では、通常、プロジェクト開発フェーズ、テストフェーズ、最終オンラインフェーズを経ます。各フェーズのプロジェクトコード要件は異なる場合があります。では、プロジェクトが異なる段階で異なる効果を提示し、異なる機能を簡単に使用するにはどうすればよいでしょうか。
ここで環境の概念を導入する必要があります。公式ドキュメントのモードと環境変数の説明

一般的に、プロジェクトには次の 3 つの環境があります。

開発環境 (開発フェーズ、ローカル開発バージョン、通常はいくつかのデバッグツールまたは追加の補助機能を使用)。
テスト環境（テスト段階、発売前バージョン、いくつかのバグ修正を除いて、基本的にオンラインバージョンと大きな違いはありません）;
実稼働環境（オンライン段階、公式に公開されたバージョンは一般的に最適化されており、エラー報告はオフになっています）

開発者として、環境ごとに異なるコードを記述し、これらのコードが正しい環境で実行されるようにする必要があるかもしれません。では、コード内でプロジェクトの環境を判断し、異なるコードを同時に実行するにはどうすればよいでしょうか。これには、環境を正しく構成および管理することが必要です。

1. 設定ファイル

環境を正しく構成するには、まず図に示すように、さまざまな環境構成間の関係を理解する必要があります。

上の図から、各環境には実際には独自の異なる構成があり、それらの共通部分もあることがわかります。共通部分は、すべての環境で共有される構成項目です。では、Vue ではこれらをどのように処理すればよいのでしょうか。

さまざまな環境で変数を構成するには、ルートディレクトリに次の形式のファイルを作成します。

.env # すべての環境で読み込まれます
.env.local # すべての環境で読み込まれますが、git では無視されます
.env.[mode] # 指定されたモードでのみロードされます。例: .env.development、.env.production
.env.[mode].local # 指定されたモードでのみロードされますが、git では無視されます

たとえば、開発環境でのみ読み込まれることを示す .env.development という名前のファイルを作成します。

このファイルでは、次の変数のキーと値のペアを設定できます。

# 開発環境設定 NODE_ENV=development
VUE_APP_API_BASE_URL=https://www.baidu.com/

現時点で vue.config.js 内のこれらの変数にアクセスするにはどうすればよいでしょうか?アクセスするには、process.env.[name] を使用します。

// vue.config.js
console.log(process.env.NODE_ENV); // 開発（ターミナルに出力）

npm run serve コマンドを実行すると、vue-cli-service serve コマンドに設定されているデフォルトの環境が development であるため、出力は development であることがわかります。

変更する必要がある場合は、package.json の serve スクリプトのコマンドを次のように変更できます。

// パッケージ.json
「スクリプト」: {
  "serve": "vue-cli-service サーブ --mode ステージ",
},

–mode stage は実際には webpack 4 のモード設定項目を stage に変更し、対応する .env.[model] ファイルの下の設定を読み取ります。
対応する設定ファイルが見つからない場合は、デフォルトの環境 development が使用されます。同様に、vue-cli-service build はデフォルトの環境 production を使用します。

別の .env ファイルを作成する場合は、同じ変数を異なる値で再度構成します。

# 環境設定 NODE_ENV=ENV
VUE_APP_API_BASE_URL = http://www.soso.com/

.env ファイルはすべての環境、つまりパブリック構成によってロードされるため、vue-cli-service serve が最終的に実行されるとどのファイルが出力されるのでしょうか?

答えは開発です。

ただし、.env.development.local ファイルが上記のように構成されている場合、答えは ENV です。

したがって、.env.[mode].local は .env.[mode] の下の同じ構成を上書きします。

同様に、.env.local は .env の下の同じ構成を上書きします。

このことから、同じ構成項目の重みは次のようになると結論付けることができます: .env.[mode].local > .env.[mode] > .env.local > .env
注: より大きな重みを持つ同じ構成項目がより小さな重みを持つ構成項目をカバーするだけでなく、Javascript での Object.assign の使用法と同様に、異なる構成項目がマージされます。

2. 環境注入

上記の設定ファイルを作成することで、コマンドラインを使用してプロジェクト環境をセットアップし、自由に切り替えることができるようになりました。ただし、Vue のフロントエンドコードに出力される process.env は、vue.config.js の出力と異なる場合があることに注意してください。これには、webpack が DefinePlugin 組み込みプラグインを通じて process.env をクライアントコードに挿入するという知識ポイントを普及させる必要があります。

// webpack の設定 {
    ...
    プラグイン: [
        新しい webpack.DefinePlugin({
            'プロセス.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV)
            }
        }）、
    ]、 
    ...
}

vue-cli 3.x によってカプセル化された webpack 構成ではすでにこの機能が完了しているため、クライアントコードで process.env の値を直接出力できます。オブジェクトには複数のキーと値のペアを含めることができるため、複数の値を注入できます。ただし、vue-cli によってカプセル化された後は、環境構成ファイル内の VUE_APP_ で始まる変数のみが注入にサポートされます (NODE_ENV と BASE_URL という 2 つの特殊変数を除く)。

たとえば、重みが最も高い .env.development.local ファイルに次のように記述します。

# 開発環境設定 NODE_ENV=developmentLocal
VUE_APP_API_BASE_URL=https://www.baidu.com/
名前=javascript

次に、vue.config.js で process.env を印刷しようとすると、ターミナル出力は次のようになります。

{
    ...
    npm_config_ignore_scripts: ''、
    npm_config_version_git_sign: ''、
    npm_config_ignore_optional: ''、
    npm_config_init_version: '1.0.0'、
    npm_package_dependencies_vue_router: '^3.0.1'、
    npm_config_version_tag_prefix: 'v'、
    npm_node_execpath: '/usr/local/bin/node',
    NODE_ENV: '開発ローカル'、
    VUE_APP_API_BASE_URL: 'https://www.baidu.com/',
    名前: 'javascript',
    BABEL_ENV: '開発'、
    ...
}

出力内容には、環境設定の変数に加えて多くの npm 情報が含まれていることがわかりますが、エントリファイル main.js に印刷すると、次の出力が表示されます。

{
  ベースURL: "/",
  NODE_ENV: "developmentLocal"、
  VUE_APP_API_BASE_URL: "https://www.baidu.com/",
}

VUE_APP_ で始まらない変数は、注入時にフィルタリングされることがわかります。追加の BASE_URL は、vue.config.js で設定した値で、デフォルトでは / になっています。これは、環境設定ファイルでは無効です。

3. 追加設定

上記では、新しい設定ファイルを作成することで、プロジェクトの異なる環境に異なる変数値を設定し、プロジェクトの基本的な環境管理を実現できます。ただし、.envなどの設定ファイル内のパラメータは現在静的な値のみをサポートしており、動的なパラメータは使用できません。場合によっては、特定の要件を満たすことができません。

この時点で、ルートディレクトリに新しい config フォルダーを作成して、追加の構成ファイルを保存できます。

/* 設定ファイル index.js */
 
// パブリック変数 const com = {
  IP: JSON.stringify('xxx')
};

モジュール.エクスポート = {
  // 開発環境変数 dev: {
    環境: {
      タイプ: JSON.stringify('dev'),
      ...com
    }
  },
  // 本番環境の環境変数ビルド: {
    環境: {
      タイプ: JSON.stringify('prod'),
      ...com
    }
  }
}

上記のコードでは、環境変数をパブリック変数、開発環境変数、本番環境環境変数に分割しています。もちろん、これらの変数は、ユーザーの IP アドレスのように動的なものになることもあります。
ここで、これらの変数を vue.config.js に挿入する必要があります。chainWebpack を使用して DefinePlugin の値を変更できます。

設定ファイル
const configs = require('./config');
 
// 対応するマージ処理を行うために使用されます const merge = require('webpack-merge');
 
// 環境に基づいて使用する構成を決定します const cfg = process.env.NODE_ENV === 'production' ? configs.build.env : configs.dev.env;
モジュール.エクスポート = {
  チェーンWebpack: config => {
    config.plugin('define').tap(args => {
      名前を 'process.env' とします。
      // 元の値が変更されないように merge を使用します args[0][name] = merge(args[0][name], cfg);
      引数を返す
    })
  },	
}

最後に、動的構成を含むオブジェクトをクライアントに正常に出力できます。

{
  ベースURL: "/",
  IP: "xxx",
  NODE_ENV: "developmentLocal"、
  タイプ: "dev",
  VUE_APP_API_BASE_URL: "https://www.baidu.com/",
}

4. 実際のシナリオ

プロパティにアクセスするには process.env.xxx を使用します

<スクリプト>
エクスポートデフォルト{
  データ（） { 
    戻る {
      BASEURL:process.env、
    } 
  },  
  マウントされた(){
 	console.log(this.BASEURL.VUE_APP_API_BASE_URL) // https://www.baidu.com/
  }
}
</スクリプト>

// axiosインスタンスを作成する const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = ベース URL + リクエスト URL
  タイムアウト: 5000
})

結論

環境の構成と管理は、プロジェクトの構築において重要な役割を果たします。プロジェクトにさまざまな環境を構成することで、開発の柔軟性を高め、プログラムの拡張性を向上させるだけでなく、さまざまな環境でのプロジェクトの動作メカニズムを理解および分析し、グローバルコンセプトを確立するのにも役立ちます。

Vue CLI のモードと環境変数に関するこの記事はこれで終わりです。Vue CLI のモードと環境変数に関するより詳しい情報は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: