vue-cli は Webpack 環境設定を操作します

今回は、Webpack 環境設定を操作するための vue-cli について説明します。vue-cli が Webpack 環境設定を操作するための 注意事項 は何ですか?実際のケースを見てみましょう。

Vue が今これほど人気が​​ある理由の 1 つは、初心者向けの環境構築コストを大幅に簡素化する公式のスキャフォールディング生成ツール Vue-cli のおかげです。しかし、実際のビジネスでは、他の機能を実装する必要があることがよくあります。変換のために、この記事ではまず、実際のビジネス ニーズに基づいて vue-cli によって生成されたテンプレートを学習し、次に関連する変更を加えます。

Vue-cli はテンプレートファイルディレクトリを生成します

├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── Hello.vue
│ └── main.js
└── static

この記事の主な焦点は

build - タスクのコードをコンパイルします

config - webpack の

設定ファイル

package.json - プロジェクトに関する基本情報

Webpack 設定の各行の具体的な意味については、ここでは詳しく紹介しませんので、vue2.0 スキャフォールディングの Webpack 設定ファイルの分析を参照してください。

共通要件 1: マルチ環境の構成とリリース

Vue-cli によって生成されたテンプレートは、それぞれ開発環境サービスを開始し、パッケージ化を実行するための npm run dev スクリプトと npm run build スクリプトでのみ構成されます。 多くの場合、通常の企業開発プロセスには、少なくとも開発環境、テスト シミュレーション環境、実稼働環境があり、各環境で応答されるサーバー リクエスト アドレスや一部の構成パラメーターは異なり、公開する場合は複数のサーバーに公開する必要があります。したがって、自動化されたスクリプトを実行する必要があります。ビルドしてリリースします。

まずこの問題を明確にし、記事を再版する必要があります。著者: Zheng Haibo、リンク、出典: Zhihu

これは実際には vue とは関係なく、コードがどこに構築されるかという一般的な質問です。質問のサーバーが実行中のサーバーを指している場合、実際にはどちらのオプションも適切な選択ではありません。私を含む多くの新人は、私が仕事を始める前は、デプロイメント コードは次のようになると考えていました

しかし実際には、大規模なインターネット企業ではさらに問題が発生するでしょう。以下の導入は一般的な方法であり、一部の簡略化されたプロセスは初心者が理解しやすいようにするためのものです。コードを git サーバーまたは svn サーバーに送信します。これはビルドされたファイルではなく、ソース ファイルです。ビルド サーバーは、リリースされるコード バージョンを git サーバーから取得し、サブジェクトの依存関係などのインストールを完了します。ビュー。これらのファイルは通常、管理用の圧縮パッケージに圧縮され、ファイル管理サーバー クラスターである転送ステーションにアップロードされます。これらの n 個のサーバーは、対応するバージョンの同じ圧縮パッケージをファイル サーバーからプルし、解凍して、最終的に実行します

実際、ここには明らかな一連のプロセスがあり、これを手動で行うと非常に面倒になるため、通常、大企業はこれらのタスクを調整して完了するための自動展開プラットフォームを備えており、開発者は「ワンクリック」をクリックするだけで済みます。導入」で上記の内容が完成します

たとえば、gitlab や github が提供する Webhook と連携すると、コードの安定バージョンがプッシュされたことを自動デプロイメント プラットフォームに自動的に通知します (Push イベント）。そうすれば、ボタンをクリックする必要さえありません。これは、ビルドとデプロイメントを分離する典型的なケースであり、コードのコピーが確実にビルドされることや、複数環境のビルドによって引き起こされる不整合の可能性を回避することなど、多くの利点がもたらされます。ビルドは一般にオーバーヘッドの高い動作です。サーバーの実行時に問題が発生する可能性がありますが、不安定性はすぐにロールバックまたは復元でき、同じバージョンのコードを再構築する必要はありません。 。 。

とはいえ、パッケージ化と構築は簡単な問題ではないため、それを構成するには自動ツールが必要です。既存の成熟したソリューションは、Docker を使用してアプリケーション コンテナ エンジンを構築し、構築、公開などを行うことです。ただし、私はこの分野に詳しくありません。この分野に詳しい学生はそれを共有できます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue-cli+webpack vue開発環境の構築方法

ネイティブJSが複数のスクロールバーを同期的に操作する方法

以上がvue-cli は Webpack 環境設定を操作しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。