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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • .env ファイルを使用して Vue プロジェクトでグローバル環境変数を設定する方法
  • Vue での cross-env の使用に関する詳細な分析
  • vue cli で env を使用するガイド

<<:  Mysql 自己結合クエリ例の詳細な説明

>>:  Dockerを使用してSpringBootプロジェクトをデプロイする方法

推薦する

HTML相対パスの親ディレクトリと子ディレクトリの書き方

親ディレクトリを指定する方法../ はソース ファイルの親ディレクトリを表し、../../ はソース...

1 行のコードでさまざまな IE 互換性の問題を解決します (IE6-IE10)

x-ua-compatible は、IE ブラウザがページを解析およびコンパイルするためのモデルを...

コンパイル/サーバーなしでブラウザにCommonJSモジュールを実装する

目次導入1. one-click.jsとは2. パッケージングツールはどのように機能しますか? 3....

鏡像効果を実現する JavaScript キャンバス

この記事では、JavaScriptキャンバスでミラーイメージ効果を実現するための具体的なコードを参考...

MySQL インデックスの原理と最適化の詳細な説明

序文この記事は Meituan の大物によって書かれました。とても素晴らしいので、皆さんと共有したい...

InnoDB タイプの MySql によるテーブル構造とデータの復元

前提条件: データベースを復元するために必要な .frm ファイルと .ibd ファイルを保存します...

JavaScript で矢印関数を使用できないシナリオはどれですか

目次1. オブジェクトメソッドを定義する2. プロトタイプメソッドを定義する3. イベントコールバッ...

...

Linux での MySQL のインストールに関するチュートリアル

目次1. 古いバージョンを削除する2. サーバーのカーネルタイプを確認し、適切なバージョンをダウンロ...

httpsウェブサイトにリファラーhttpsとhttpジャンプリファラーを送信させる方法

この記事では、HTTP プロトコルのリファラーのメタデータ パラメータの提案について説明します。この...

フロントエンド開発における一般的なテクニックのまとめ

1. 記事タイトルリストの右側に日付を表​​示する方法:コードをコピーコードは次のとおりです。 &l...

JS で単一ファイルコンポーネントを実装する方法

目次概要単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...

ネイティブWeChatアプレット開発におけるreduxの使用の詳細な説明

前提複雑なシナリオでは、複数の異なるページ間で大量のデータを使用したり変更したりする必要があります。...

Linux ドライバ開発でよく使われる関数 copy_from_user open read write の詳細な説明

目次Linux ドライバーの共通機能 (copy_from_user open read write...