マルチ環境構成に取り組む前は、とても先進的だと感じていましたが、実際に操作してみると、まあまあという感じでした。ここでは、私が遭遇した問題点と解決策を記載します。間違っている点があれば、ご指摘いただければ幸いです。 マルチ環境構成とは何ですか? また、なぜそれが必要なのですか?最も一般的なマルチ環境構成は、開発環境構成と本番環境構成(つまり、オンライン構成)です。多くの場合、開発環境のドメイン名と一部の構成項目は、本番モードのものと異なります。このとき、マルチ環境構成を実行する必要があります。そうしないと、バージョンをリリースするたびに大量のデータを変更するのが面倒になります。もう 1 つの状況は、2 つのプロジェクトで同じコード セットを使用しているが、最終的には異なるパッケージにパッケージ化する必要があることです。この場合、マルチ環境構成によって開発効率が大幅に向上します。 .env ファイルはどこで設定されますか? .env ファイルは、以下に示すように、プロジェクトのルート ディレクトリの package.json と同じレベルに構成されます。 .env ファイルをどのように構成しますか? また、いくつ構成する必要がありますか? .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' など、必要な数だけ設定できます。 動作環境の設定方法以下に示すように、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 Vue プロジェクトのマルチ環境設定 (.env) の実装に関するこの記事はこれで終わりです。Vue のマルチ環境設定に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Dockerを使用してSpringBootプロジェクトをデプロイする方法
親ディレクトリを指定する方法../ はソース ファイルの親ディレクトリを表し、../../ はソース...
x-ua-compatible は、IE ブラウザがページを解析およびコンパイルするためのモデルを...
目次導入1. one-click.jsとは2. パッケージングツールはどのように機能しますか? 3....
この記事では、JavaScriptキャンバスでミラーイメージ効果を実現するための具体的なコードを参考...
序文この記事は Meituan の大物によって書かれました。とても素晴らしいので、皆さんと共有したい...
前提条件: データベースを復元するために必要な .frm ファイルと .ibd ファイルを保存します...
目次1. オブジェクトメソッドを定義する2. プロトタイプメソッドを定義する3. イベントコールバッ...
目次1. 古いバージョンを削除する2. サーバーのカーネルタイプを確認し、適切なバージョンをダウンロ...
この記事では、HTTP プロトコルのリファラーのメタデータ パラメータの提案について説明します。この...
1. 記事タイトルリストの右側に日付を表示する方法:コードをコピーコードは次のとおりです。 &l...
目次概要単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...
実際、これは非常に簡単です。imgにaタグを追加し、 <a href='tencent...
前提複雑なシナリオでは、複数の異なるページ間で大量のデータを使用したり変更したりする必要があります。...
目次Linux ドライバーの共通機能 (copy_from_user open read write...