vue-cli vue3 マルチ環境構成

古いルールは、API ドキュメントのドキュメントアドレスを調べます: vue-cli API ドキュメント

パターンと環境変数 (個人的には、最初にドキュメントを読むことをお勧めします。自分で試してみてください。理解できない場合は、投稿にアクセスして答えを見つけてください)

ここに画像の説明を挿入

マルチ環境ファイルの書き込み

モードは、Vue CLI プロジェクトの重要な概念です。デフォルトでは、Vue CLI プロジェクトには 3 つのモードがあります。

開発モードは vue-cli-service に使用され、サーブテスト
モードは vue-cli-service test に使用されます:ユニット
プロダクションモードは vue-cli-service ビルドに使用され、vue-cli-service test:e2e を
渡すことができます --modeオプションパラメータコマンドラインのデフォルトモードをオーバーライドします。たとえば、ビルドコマンドで開発環境変数を使用する場合

vue-cli-service build --mode development

NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL ='127.0.0.1:8080'
outputDir = development

NODE_ENV 環境

vue-cli-service コマンドを実行すると、すべての環境変数が対応する環境ファイルから読み込まれます。ファイル内に NODE_ENV 変数が含まれていない場合、その値はモードによって異なります。たとえば、運用モードでは「運用」、テストモードでは「テスト」に設定され、デフォルトは「開発」に設定されます。

NODE_ENV は、アプリが開発、本番、またはテストのどのモードで実行されるかを決定し、したがって、どの webpack 構成を作成するかを決定します。

たとえば、NODE_ENV を「test」に設定すると、Vue CLI は単体テスト用に最適化された webpack 構成を作成します。これは、単体テストに不要なイメージやその他のリソースを処理しません。

同様に、NODE_ENV=development は、ホットアップデートを有効にし、リソースをハッシュしたり、ベンダーバンドルを出力したりせず、開発中に迅速に再構築することを目的とする webpack 構成を作成します。

vue-cli-service ビルドコマンドを実行するときは、デプロイ先の環境に関係なく、常に NODE_ENV を "production" に設定して、アプリケーションをデプロイできるようにする必要があります。
ここに画像の説明を挿入

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service --mode test"
  },

ここに画像の説明を挿入

確認するために、表示スキーマ名をページ表示します

ここに画像の説明を挿入

パッケージ構成検証用にパッケージ出力フォルダー名を指定します

ここに画像の説明を挿入

テスト

npmラムサーブ

ここに画像の説明を挿入

npmラムテスト

ここに画像の説明を挿入

パッケージテスト npm run build

ここに画像の説明を挿入