vue cli で env を使用するガイド

序文

vueCli を使用してプロジェクトを開発したことのある方は、少しがっかりしていると思います。通常の開発時には、3 つのインターフェース環境 (開発、テスト、正式) がありますが、vueCli は開発モードと本番モード (テスト - 単一テストを除く) の 2 つのモードしか提供していません。実際、これは友人が vueCli のドキュメントを理解していないために発生します。

vueCliコマンドでは、--modeはNODE_ENVではなく.env.[mode]に対応します。

知らせ

VUE_APP_ 変数に加えて。

特別な変数が 2 つあります。

NODE_ENV: 開発、本番、テストのいずれかです。その値は、アプリケーションが実行されているモードによって異なります。
BASE_URL: これは、アプリケーションがデプロイされる基本パスである vue.config.js の publicPath オプションと一致します。

紹介-公式

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

開発モードはvue-cli-service serveに使用されます
テストモードはvue-cli-service test:unitに使用されます
プロダクションモードは、vue-cli-service ビルドと vue-cli-service テストに使用されます:e2e

--mode オプション引数をコマンドラインに渡すことで、デフォルトモードを上書きできます。

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

NODE_ENV は、アプリの実行モード（開発、本番、テストのいずれ）を決定し、作成される webpack 構成も決定します。

たとえば、NODE_ENV を "test" に設定すると、Vue CLI は、ユニットテストに必要のない画像やその他のリソースを処理しない、ユニットテスト用に設計された最適化された webpack 構成を作成します。

同様に、NODE_ENV=development は、開発中に迅速に再構築できるように、ホットロードを有効にし、アセットをハッシュせず、ベンダーバンドルを生成しない webpack 構成を作成します。

vue-cli-service ビルドコマンドを実行するときは、どの環境にデプロイするかに関係なく、デプロイ可能なアプリケーションを取得するために、常に NODE_ENV を「production」に設定する必要があります。

設定例

以下のように3つの設定ファイルがあります。

#.env.開発
NODE_ENV=開発
VUE_APP_AXIOS_BASEURL=http://xxxx
#.env.preview テスト環境設定 NODE_ENV=production
VUE_APP_AXIOS_BASEURL=http://xxxx
#.env.production
NODE_ENV=本番
VUE_APP_AXIOS_BASEURL=http://xxxx

アクシオスでの使用

「axios」からaxiosをインポートします。
定数conf = {
  ベースURL: process.env.VUE_APP_AXIOS_BASEURL、
};
axios.create(conf) を返します。

package.json 構成

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

起動方法

npm run serve #デフォルトdev
npm run build #テスト環境 npm run build:release #正式環境

vue cli の env の使用ガイドに関するこの記事はこれで終わりです。より関連性の高い vue cli env コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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