vue によってコンパイルされた静的ページがどこにあるかについての簡単な分析

Vue は、インタラクティブな Web アプリケーションをより簡単に作成できるようにする人気の JavaScript フレームワークです。 Vue の利点の 1 つは、仮想 DOM を使用して Web ページのさまざまなコンポーネントを管理することです。これにより、コンポーネント レベルでのデータとビューの更新がより効率的になります。

しかし、Vue を使用して Web アプリケーションを作成すると、問題が発生します。開発プロセス中、作成した Vue コンポーネントは通常 .vue ファイルの形式で存在し、これらのファイルを直接使用することはできません。 。 生産中。運用環境では、これらのコンポーネントを Web サーバーにデプロイする前に、静的な HTML、CSS、および JavaScript ファイルにコンパイルする必要があります。そこで問題は、これらのコンパイルされた静的ファイルはどこに配置されるのかということです。

答えは簡単です。本番環境で Vue を使用する場合、Vue CLI を使用してアプリケーションを構築する必要があります。これにより、Vue コンポーネントが静的な HTML、CSS、JavaScript ファイルに自動的にコンパイルされ、配置されます。それらは ./dist ディレクトリにあります。このディレクトリは Vue CLI によって自動的に生成され、アプリケーションのすべての静的リソースが含まれています。

./dist ディレクトリには、次のようなファイル構造が表示されます。

dist/
├── css/
│   ├── app.1a2b3c4d.css
│   └── chunk-vendors.5e6f7g8h.css
├── js/
│   ├── app.1a2b3c4d.js
│   ├── app.1a2b3c4d.js.map
│   ├── chunk-vendors.5e6f7g8h.js
│   └── chunk-vendors.5e6f7g8h.js.map
└── index.html

このファイル構造には、エントリ ファイルであるindex.html ファイルが表示されます。これは、ブラウザがアプリケーションにアクセスするための開始点でもあります。また、アプリケーションに必要な CSS ファイルと JavaScript ファイルがそれぞれ含まれる css ディレクトリと js ディレクトリも表示されます。このうち、ファイル名の文字列は、キャッシュや更新を容易にするためのソースコードのハッシュ値となっています。

./dist ディレクトリ内のすべてのファイルを Web サーバーにデプロイし、ブラウザを通じてアプリケーションにアクセスできます。 Vue を使用する際の手動操作を減らしたい場合は、Jenkins などの自動デプロイメント ツールを使用して、アプリケーションを自動的に構築してデプロイすることもできます。

要約すると、Vue のコンポーネントは運用環境で Vue CLI を通じてコン​​パイルする必要があり、コンパイルされたファイルは ./dist ディレクトリに保存されます。 ./dist ディレクトリ内の静的ファイルを Web サーバーにデプロイし、ブラウザを通じてアプリケーションにアクセスできます。

以上がvue によってコンパイルされた静的ページがどこにあるかについての簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。