vue パッケージ化後に dist ファイルを実行する方法

Vue プロジェクトでは、dist ディレクトリはコードがパッケージ化された後に生成されるフォルダーであり、静的リソース ファイルとパッケージ化された JavaScript、CSS、およびその他のファイルが含まれます。パッケージ化されたプロジェクト ファイルをローカルで実行する場合は、単純な静的サーバーを使用して起動できます。

以下では、Node.js の http-server モジュールを使用してローカル サーバーを構築する方法について説明します。

1. Node.js がインストールされていることを確認し、コマンド ラインで次のコマンドを実行してバージョン番号を表示できます。インストールされていない場合は、まず Node.js をインストールする必要があります。

   node -v

2. http-server モジュールをインストールします。コマンドラインで次のコマンドを実行します。

   npm install -g http-server

3. dist ディレクトリに移動します。コマンド ラインで次のコマンドを実行します (/path/dist独自のプロジェクトの dist ディレクトリが配置されているパス)。

   cd /path/dist

4. httpサーバーを起動します。コマンドラインで次のコマンドを実行します。

   http-server

5. この時点で、次のようなメッセージがコマンド ラインに出力されます。

   これはサーバーが正常に起動したことを意味します。ブラウザに上図http://127.0.0.1:8080などの URL を入力してhttp://192.168.195.1:8080、パッケージ化されたプロジェクト ファイルにアクセスできます。

6. http-server モジュールのデフォルトのポートは 8080 であることに注意してください。すでに使用されている場合は、次のコマンドを使用してポートを指定できます。この時点で、サーバーはポート 8081 で起動します。

   ​​​​​​​http-server -p 8081