Vue プロジェクトのビルド

Vueプロジェクトが完成したら、「開発モード（development mode）」から「ビルド（build）」モードへと移行する必要があります。
ビルドコマンドは、Vueプロジェクトをブラウザで直接実行できるように最適化された .html、.js、.css ファイルへとコンパイルします。
Vueプロジェクトをビルドするのは、他のユーザーがアクセスできるようにサーバー上に公開用ファイルを作成するためです。

1. Webページの「ビルド」プロセス

本チュートリアルでは、これまでプロジェクトを「開発モード」で動かしてきました。これは、Viteビルドツールが開発用サーバーを実行している状態を指します。開発中にコードを変更して保存すると、Viteが即座にページを更新（ホットリロード）しますが、これにはコンピュータの多くのリソースを消費します。

ビルドステップは開発フェーズの終了後、ページを一般公開する準備が整った際に行います。ここでは、Viteの開発モードを介さずにブラウザが直接理解できる形式へプロジェクトを変換しなければなりません。このビルド工程によって、サーバーのリソース使用量を最小限に抑え、エンドユーザーに対するパフォーマンスを劇的に向上させることができます。

2. ビルドコマンドの実行

Vueアプリケーションをビルドするには、まず開発用サーバーが稼働している場合は「Q」キーまたは「ctrl」+「C」を押して停止させ、ターミナルで以下のコマンドを入力します。

npm run build

プロジェクトのビルドが完了すると、Viteは dist という名称のフォルダを作成します。このフォルダには、公開用サーバーでプロジェクトを実行するために必要なすべてのファイルが格納されています。これらは、開発中に私たちが書いていた *.vue ファイルではなく、ブラウザがネイティブに解釈できる *.html、*.css、*.js ファイルに変換されています。

3. ビルド結果のプレビュー

ビルドされたプロジェクトが実際にブラウザでどのように動作するかを確認するには、以下のコマンドを使用します。

npm run preview

このコマンドを実行すると、ローカル環境でブラウザウィンドウが立ち上がり、dist フォルダ内に生成されたビルド済みプロジェクトの内容が表示されます。これにより、デプロイ前に最終的な動作確認を行うことが可能です。