サーバー上で vue プロジェクトを実行する方法 (手順)-フロントエンドQ&A-php.cn

サーバー上で vue プロジェクトを実行する方法 (手順)

PHPz

リリース： 2023-04-13 11:20:26

オリジナル

2560 人が閲覧しました

Vue は、開発者が最新の Web アプリケーションを迅速に構築できるようにする人気のフロントエンドフレームワークです。ただし、Vue はデフォルトでブラウザーで実行されます。サーバー上で Vue アプリケーションを実行する場合は、それを完了するためにいくつかの追加手順を実行する必要があります。

この記事では、クラウドでもローカルサーバーでも、どこにでもアプリケーションを簡単にデプロイできるように、サーバー上で Vue アプリケーションを実行する方法について詳しく説明します。

ステップ 1: Node.js をインストールする

サーバー上で Vue アプリケーションを実行するには、まず Node.js をインストールする必要があります。 Node.js は Chrome V8 エンジンに基づく JavaScript ランタイム環境であり、サーバー側で JavaScript コードを実行できます。 Node.js の公式 Web サイトから、システムに適したバージョンをダウンロードできます。

インストールが完了したら、ターミナルにコマンド node -v を入力して、Node.js が正常にインストールされたかどうかを確認できます。

ステップ 2: Vue CLI をインストールする

Vue CLI は、Vue アプリケーションを迅速に作成するのに役立つコマンドラインツールです。サーバー上で Vue アプリケーションを実行するには、Vue CLI を使用して Vue アプリケーションの基本構造を作成する必要があります。

Vue CLI のインストールは非常に簡単です。ターミナルに次のコマンドを入力するだけです:

npm install -g @vue/cli

ログイン後にコピー

このコマンドは、Vue CLI の最新バージョンをグローバルにインストールします。

ステップ 3: Vue アプリケーションを作成する

Vue CLI をインストールしたら、それを使用して新しい Vue アプリケーションを作成できます。

ターミナルで、アプリケーションを作成するディレクトリを入力し、次のコマンドを入力します。

vue create my-app

ログイン後にコピー

このコマンドは、my-app# という名前の新しいディレクトリを作成します。 ## Vue アプリケーション。

インストールプロセスでは、アプリケーション構成、使用するプラグインなど、いくつかのオプションを選択するよう求められます。ニーズに応じて選択できます。

これらの手順を完了すると、Vue CLI は必要な依存関係を自動的にインストールし、基本的なアプリケーション構造を作成します。

ステップ 4: ローカルサーバーを起動する

新しい Vue アプリケーションを作成した後、組み込みの Webpack 開発サーバーを使用してアプリケーションを実行できます。このサーバーは、基本的なサーバー環境を提供するだけでなく、アプリケーション内のコードを自動的に再コンパイルし、ブラウザーに最新の変更をリアルタイムで表示します。

アプリケーションディレクトリで、次のコマンドを使用してサーバーを起動できます:

npm run serve

ログイン後にコピー

このコマンドはローカルサーバーを起動し、アプリケーションにアクセスするためにデフォルトのブラウザを自動的に開きます。 Vue アプリケーションが正常に実行されたことがブラウザで確認できます。ただし、このサーバーはローカルにのみ存在するため、サーバー上で Vue アプリケーションを実行したい場合は、別の方法が必要です。

ステップ 5: ファイルをサーバーに公開する

Vue アプリケーションをサーバー上で実行する場合は、アプリケーションコードをサーバー上にデプロイする必要があります。最も一般的な方法は、Git を使用してコードをサーバーにプッシュし、Node.js を使用してサーバー上でアプリケーションを実行することです。

サーバー上では、次の手順を使用して Vue アプリケーションをデプロイできます。

Git を使用して、アプリケーションのリモートリポジトリのクローンを作成します。
アプリケーションのディレクトリに移動し、必要な依存関係をインストールします。
```
cd my-app
npm install
```
ログイン後にコピー
アプリケーションの実稼働バージョンをビルドします。
```
npm run build
```
ログイン後にコピー
このコマンドは、アプリケーションコードをパッケージ化し、サーバー上で実行できる静的ファイルを生成します。
サーバー上で Node.js を使用してアプリケーションを実行します。
```
node server.js
```
ログイン後にコピー
server.js は、すべての HTTP リクエストを処理し、静的ファイルをブラウザーに送り返す単純な Node.js サーバーファイルです。

上記の手順を完了すると、Vue アプリケーションはサーバー上で正常に実行できるようになります。サーバー URL にアクセスしてアプリケーションを表示できます。

概要

この記事では、サーバー上で Vue アプリケーションを実行する方法について詳しく説明しました。 Node.js と Vue CLI をインストールして、Vue アプリケーションの基本構造を作成しました。また、組み込みの Webpack 開発サーバーを使用してアプリケーションを実行する方法と、アプリケーションの実稼働バージョンをビルドしてサーバーにアプリケーションをデプロイする方法についても学びました。

サーバー上で Vue アプリケーションを正常に実行するには、Node.js と Web 開発の基本を理解する必要があります。アプリケーションを実行するには複数の手順が必要ですが、一度慣れてしまえば、Vue アプリケーションをどこにでも簡単にデプロイできるようになります。

以上がサーバー上で vue プロジェクトを実行する方法 (手順)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。