vueプロジェクトのマルチ環境設定(.env)の実装

マルチ環境構成に取り組む前は、とても先進的だと感じていましたが、実際に操作してみると、まあまあという感じでした。ここでは、私が遭遇した問題点と解決策を記載します。間違っている点があれば、ご指摘いただければ幸いです。

マルチ環境構成とは何ですか? また、なぜそれが必要なのですか?

最も一般的なマルチ環境構成は、開発環境構成と本番環境構成（つまり、オンライン構成）です。多くの場合、開発環境のドメイン名と一部の構成項目は、本番モードのものと異なります。このとき、マルチ環境構成を実行する必要があります。そうしないと、バージョンをリリースするたびに大量のデータを変更するのが面倒になります。もう 1 つの状況は、2 つのプロジェクトで同じコード セットを使用しているが、最終的には異なるパッケージにパッケージ化する必要があることです。この場合、マルチ環境構成によって開発効率が大幅に向上します。

.env ファイルはどこで設定されますか?

.env ファイルは、以下に示すように、プロジェクトのルート ディレクトリの package.json と同じレベルに構成されます。

.env ファイルをどのように構成しますか? また、いくつ構成する必要がありますか?

.env ファイルに名前を付けるにはどうすればいいですか?
初めてネットで調べたとき、多くのブロガーがその名前は
.env.development 開発環境の設定ファイル
.env.production 本番環境用の設定ファイル
実はそうではありません。開発環境と本番環境を構成する場合は、このように名前を付けても問題ありません。ただし、複数のプロジェクトで共通のコードを使用する場合は、このように名前を付けるのは少し不適切です。したがって、この部分の命名形式では、ファイルを .env で開始するだけで、残りの部分には任意の名前を使用できます。

.env ファイルの設定

このセクションでは、使用したいものを設定する方法について説明します。たとえば、プロジェクトの名前をグローバルに取得したい場合は、.env で設定するだけです。以下では、値を取得する方法について詳しく説明します。

npm serve または npm run build を実行すると、デフォルトで .env 構成が使用されます。

アイコン：

//これには VUE_APP_*** のみが必要です。この形式で名前を付けても問題ありません。気分に応じて末尾に大文字または小文字を使用できます。
VUE_APP_NAME = 'ルー・ユアンヤン'
VUE_APP_HTTPS = 'http://www.louhc.com/'
VUE_APP_ABBREVIATION = 'louhc'
VUE_APP_LOGO = 'louhc'

デフォルトの .env ファイルを構成した後、別の環境では別の名前を使用するなど、特別な要件に合わせて .env ファイルを構成します。たとえば、.env.bsy ファイル。.bsy はランダムに書き込んだ名前で、カスタマイズできます。

//これには VUE_APP_*** のみが必要です。この形式で名前を付けても問題ありません。気分に応じて末尾に大文字または小文字を使用できます。
VUE_APP_NAME = '白山クラウド'
VUE_APP_HTTPS = 'http://www.louhc.com:82/'
VUE_APP_ABBREVIATION = 'bsy'
VUE_APP_LOGO = 'bsy'

など、必要な数だけ設定できます。
.envファイルの設定が終わったら、実行環境を設定する必要があります。

動作環境の設定方法

以下に示すように、package.jsonファイルを見つけます。

build: および serve: に続く名前は任意であり、実行時に対応する構成項目が見つかるように一致する必要があります。

 「スクリプト」: {
    "サーブ": "vue-cli-service サーブ",
    "ビルド": "vue-cli-service ビルド",
    "build:bsy": "vue-cli-service ビルド --mode bsy",
    "build:kthz": "vue-cli-service ビルド --mode kthz",
    "serve:bsy": "vue-cli-service サーブ --mode bsy",
    "serve:kthz": "vue-cli-service サーブ --mode kthz",
  },

もう少し説明しましょう。.env はデフォルト設定項目です。環境設定項目を実行すると、デフォルト設定項目と実行中の環境設定項目がマージされます。パラメータが同じ場合は、環境設定項目がメインになります。簡単に言えば、デフォルト設定項目が存在し、環境設定項目も存在します。このとき、実行される環境設定項目の値が基準になります。デフォルト設定項目が存在し、環境設定項目が存在しない場合は、環境設定項目を実行するときにデフォルト設定項目の値も取得できます。

グローバル設定項目の値を取得する方法

例: js で VUE_APP_NAME = '娄渊洋' を取得したい場合は、値process.env.VUE_APP_NAMEを割り当てる場所に次のコード行を記述するだけです。

console.log(process.env.VUE_APP_NAME) // デフォルトの環境では、出力される名前は Lou Yuanyang bsy で、デフォルトの環境では Baishanyun です。

HTMLでグローバル設定項目の値を使用する場合は、まずそれをreturnに代入し、次に{ {}} で、使用したい値を取得します。

環境を実行する方法

デフォルト環境を実行する npm run serve
指定された環境を実行する npm run serve:bsy
デフォルト環境のパッケージ化 npm run build
環境パッケージを指定する npm run build:bsy
別の環境名に切り替えるだけです

Vue プロジェクトのマルチ環境設定 (.env) の実装に関するこの記事はこれで終わりです。Vue のマルチ環境設定に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。