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

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

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

<<:  kindとDockerを使用してローカルKubernetes環境を起動する

>>:  MySQLの日付と時刻の間隔計算の分析例

推薦する

Ubuntu システムにおけるネットワーク構成ファイルの分析と説明

今日は奇妙なネットワーク問題に遭遇しました。調査プロセスといくつかの構成状況を記録し、Linux で...

ビジュアルデザイナーの成長の3つの段階のまとめ

この本「グラフィックデザイナーとして成長する」は多くの人が読んでおり、私もオリジナルの PDF 版を...

IE のテキストモード! DOCTYPE の役割の紹介

前の記事で説明したフォームの自動入力の問題を解決した後、新しい問題が発生しました。ページの一部のスタ...

オンライン MYSQL 同期エラーのトラブルシューティング方法の概要 (必読)

序文フェイルオーバーが発生した後、よくある問題は同期エラーです。データベースが小さい場合は、ダンプし...

スタイリッシュなウェブページデザインを作成する方法(グラフィックチュートリアル)

「壮大」という言葉は、おそらく現代のデザイナーが最も聞きたくない言葉でしょう。デザイナー:「デザイン...

CocosCreator クラシック エントリー プロジェクト flappybird

目次開発環境ゲームエンジンのコンセプトCocos Creatorについてプロジェクト構造コード編集環...

Tomcat プロジェクトを展開する一般的な方法のいくつか [テスト済み]

1 / Webプロジェクトファイルをwebappsディレクトリに直接コピーするこれは最も一般的に使...

MySQL の一般的な日付比較および計算関数

MySql での時間比較の実装unix_timestamp() unix_timestamp 関数は...

jquery-multiselect を使用した IE6 のバグの解決方法

jquery-multiselect (ドロップダウン ボックスをチェックボックス付きの複数選択コン...

CSS グリッドレイアウトの完全ガイド

Grid は 2 次元のグリッド レイアウト システムです。これを使用すると、本質的にはハック メソ...

ES6 ループと反復可能オブジェクトの例

この記事では、ES6 の for ... of ループについて説明します。古い方法以前は、JavaS...

スネークゲームのアイデアを実現するためのJavaScript

JavaScriptゲームSnakeの実装アイデア(完全なコード実装)を参考までに説明します。具体...

Linux で MySQL データベースのデータ ファイル パスを変更する手順

rpm インストール方法を使用して MySQL データベースをインストールした後、データ ファイルの...

ミニプログラムでマインドマップを描く方法

目次マインドマップとは何ですか? F6で描く方法アリペイ微信要約するマインドマップとは何ですか?マイ...

Oracle10パーティションとMySQLパーティションの違いの詳細な説明

一般的に使用される Oracle10g パーティションは、範囲 (範囲パーティション)、リスト (リ...