Vue3 プロジェクトのビルド

アプリケーションを本番環境に公開する準備ができたら、Vue プロジェクトをビルドする必要があります。

Vue プロジェクトをビルドするには、次のコマンドを使用します：

npm run build

上記のコマンドを実行すると、出力結果は次のようになります：

実行が完了すると、Vue プロジェクトの下にdistディレクトリが生成されます。このディレクトリには通常、index.html ファイルと static ディレクトリが含まれています。static ディレクトリには、静的ファイル js、css、および画像ディレクトリ images（画像がある場合）が含まれています。

index.html を直接ダブルクリックして開くと、ブラウザでページが空白になる可能性があります。正常に表示するには、index.html ファイル内の js、css ファイルのパスを修正する必要があります。

例えば、dist/index.html ファイルを開くと、css と js ファイルのパスが絶対パスになっているのがわかります：

<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>
...

js、css ファイルのパスを相対パスに変更します：

<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>
...

これで、dist/index.html ファイルを直接ダブルクリックすると、ブラウザで効果を確認できます。