Vite｜制作中の確認と公開用ファイルの作成

アプリを作っている途中は、変更した画面をブラウザで確認します。公開するときは、公開先へ置くファイルを作ります。この二つの場面でViteを使いました。

作っている途中の画面を確認する

Viteには開発用のサーバーがあります。PCで動かしてブラウザから開くと、制作中のアプリを確認できます。ファイルを変更したときも、その結果をブラウザへ反映しながら作業を進められます。

ここでのViteの役割は、変更した画面を表示して確認できるようにすることです。アプリの撮影や描画そのものを担当するわけではありません。

公開するときは、Viteの本番用ビルドを使いました。HTMLやJavaScript、CSSなど、公開先で読み込ませるファイルを生成する作業です。Viteの標準設定では、生成先は dist というフォルダです。設定によって別の場所にもできます。

作ったファイルは、その後でサーバーへ配置します。Viteがファイルを作り、その後の転送と公開は別の作業です。転送の手順は公開作業の記録にまとめています。

公開先がサイトの途中のパスにある場合は、画像やJavaScriptを参照するパスも合っている必要があります。Viteには、この参照先をビルド時に調整する base という設定があります。

なお、ViteはTypeScriptのファイルを扱えますが、型の誤りを調べる処理は別です。本番用ビルドが通っても、必要な型検査や動作確認は別に行います。