vue cli3は環境ごとにパッケージ化の手順を実装します

vue cli3は環境ごとにパッケージ化の手順を実装します

cli3 でビルドされた vue プロジェクトは、ゼロ構成ファイルとして知られています。パッケージ化を容易にするために (パッケージ化のために異なる環境を手動で変更せずに)、異なる環境でパッケージ化する必要がある場合はどうすればよいでしょうか?
1. ルートディレクトリに以下の3つの設定ファイルを作成します。

ここに画像の説明を挿入

ここでは、ローカル、オフライン、オンラインの3つの環境を作成しました。3つのファイルの内容は次のとおりです。VUE_APP_TITLEは現在のファイルサフィックスに対応し、buildはプロダクションに対応します。

NODE_ENV = 'プロダクション'
VUE_APP_TITLE = 'アルファ'
====================================================================
NODE_ENV = 'プロダクション'
VUE_APP_TITLE = 'プロダクション'
====================================================================
NODE_ENV = 'プロダクション'
VUE_APP_TITLE = 'オンライン'

2.package.json は、図に示すように、対応する環境パッケージ名を構成します。

ここに画像の説明を挿入

3.図に示すように

ここに画像の説明を挿入

4. 図に示すように、インターフェース上のファイルをインターセプトします。

ここに画像の説明を挿入

5. 構成後、3 つの環境は次のようにパッケージ化されます。
アプリのパッケージ化オフライン環境: npm run alpha
アプリのパッケージ化ローカル環境: npm run build
アプリパッケージングの正式な環境: npm run online

これで、vue cli3 で環境固有のパッケージングを実装する手順に関するこの記事は終了です。より関連性の高い vue cli3 環境固有のパッケージングコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • vue-cli3 環境変数と環境パッケージの例
  • vue-cli3 パッケージコード後の白い画面の解決策
  • vue cli3.0 は静的リソースをパッケージ化して起動し、パスが見つからない問題の解決策
  • Vue Cli3 をパッケージ化して console.log ステートメントを自動的に無視する方法
  • vue-cli3.0 での CSS、JS、画像のパッケージ パスのカスタマイズの詳細な説明
  • vue-cli3 マルチ環境パッケージ構成の詳細な説明

<<:  CentOS 7 で RPM パッケージを使用して MySQL 5.7.9 をインストールするチュートリアル

>>:  Win2008 サーバー セキュリティ チェック手順ガイド (日常のメンテナンス手順)

推薦する

MacでMysqlのルートパスワードを忘れた場合の解決方法

長い間コンピューターで mysql を使用していなかったので、パスワードを忘れてしまいました。でも、...

このポイントのJavaScriptの基本

目次これ方法オブジェクト内これを隠した厳密モード要約するJavaScript の this も不思議...

Vue でクラスとスタイルを使用して v-bind バインディングを使用するいくつかの方法

要素にクラスを追加/削除することは、プロジェクト開発では非常に一般的な動作です。たとえば、Web サ...

画像ボタンをフォームのリセットボタンとして使用する方法

フォームを作成するときに、送信ボタンとリセットボタンを配置することがよくあります。ページの外観を考慮...

Kafka の Docker デプロイメントと Spring Kafka 実装

この記事は主にDockerによるKafkaのデプロイとSpring Kafkaの実装について紹介しま...

Ubuntu ブート自動起動サービス設定

Ubuntu でサービスを作成し、自動的に起動する方法: 1. [/lib/systemd/syst...

レスポンシブ Web デザイン手法を実装し、ウォーターフォール モデルに別れを告げる 5 つのステップ (グラフィック チュートリアル)

次の Web デザイン プロジェクトはレスポンシブにする必要があると上司をようやく納得させることがで...

Vue ソング プログレス バーのサンプル コード

なお、これはvue-cliで作成したプロジェクトではありません。vue.jsを参照して記述したHTM...

CSSを使用して3Dフォトウォール効果を作成する

CSS を使用して 3D フォト ウォールを作成します。具体的なコードは次のとおりです。 <!...

Docker での Redis 接続の急増をトラブルシューティングした実践的な記録

土曜日、本番サーバー上の Redis サーバーが利用できなくなり、エラー メッセージは次のようになり...

MySQL の int、char、varchar のパフォーマンスを比較する

インターネットには、真実のように見える「噂」がたくさんあります。もちろん、悪意のあるものではありませ...

CentOS8.0ネットワーク設定の実装

1. CentOS 7 と CentOS 8 のネットワーク構成の違い: VMware Workst...

Nginx に lua-nginx-module モジュールをインストールする方法

ngx_lua_module は、lua パーサーを nginx に埋め込み、lua 言語で記述され...

js でオブジェクトを作成するさまざまな方法とその長所と短所のまとめ

目次初期作成方法ファクトリーパターンコンストラクターパターンコンストラクタパターンの最適化プロトタイ...

MySQL 最適化における B ツリー インデックスの知識ポイントのまとめ

SQL を最適化する必要があるのはなぜですか?当然ですが、SQL ステートメントを記述する場合、次の...