序文vueCli を使用してプロジェクトを開発したことのある方は、少しがっかりしていると思います。通常の開発時には、3 つのインターフェース環境 (開発、テスト、正式) がありますが、vueCli は開発モードと本番モード (テスト - 単一テストを除く) の 2 つのモードしか提供していません。実際、これは友人が vueCli のドキュメントを理解していないために発生します。 vueCliコマンドでは、--modeはNODE_ENVではなく.env.[mode]に対応します。 知らせ VUE_APP_ 変数に加えて。 特別な変数が 2 つあります。
紹介-公式モードは、Vue CLI プロジェクトにおける重要な概念です。デフォルトでは、Vue CLI プロジェクトには 3 つのモードがあります。
--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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: kindとDockerを使用してローカルKubernetes環境を起動する
今日は奇妙なネットワーク問題に遭遇しました。調査プロセスといくつかの構成状況を記録し、Linux で...
この本「グラフィックデザイナーとして成長する」は多くの人が読んでおり、私もオリジナルの PDF 版を...
前の記事で説明したフォームの自動入力の問題を解決した後、新しい問題が発生しました。ページの一部のスタ...
序文フェイルオーバーが発生した後、よくある問題は同期エラーです。データベースが小さい場合は、ダンプし...
「壮大」という言葉は、おそらく現代のデザイナーが最も聞きたくない言葉でしょう。デザイナー:「デザイン...
目次開発環境ゲームエンジンのコンセプトCocos Creatorについてプロジェクト構造コード編集環...
1 / Webプロジェクトファイルをwebappsディレクトリに直接コピーするこれは最も一般的に使...
MySql での時間比較の実装unix_timestamp() unix_timestamp 関数は...
jquery-multiselect (ドロップダウン ボックスをチェックボックス付きの複数選択コン...
Grid は 2 次元のグリッド レイアウト システムです。これを使用すると、本質的にはハック メソ...
この記事では、ES6 の for ... of ループについて説明します。古い方法以前は、JavaS...
JavaScriptゲームSnakeの実装アイデア(完全なコード実装)を参考までに説明します。具体...
rpm インストール方法を使用して MySQL データベースをインストールした後、データ ファイルの...
目次マインドマップとは何ですか? F6で描く方法アリペイ微信要約するマインドマップとは何ですか?マイ...
一般的に使用される Oracle10g パーティションは、範囲 (範囲パーティション)、リスト (リ...