vue プロジェクトのデプロイメントのアップロード

Vue.js は、開発者がインタラクティブな Web アプリケーションを構築するために使用する、非常に人気のある JavaScript フレームワークの 1 つです。 Vue.js プロジェクトの構築に成功し、それをサーバーにアップロードしてデプロイしたい場合は、この記事でその方法を説明します。

ステップ 1: Web サーバー環境を確認する

Vue.js アプリケーションをアップロードしてデプロイする前に、Web サーバー環境がそれを処理および実行する準備ができているかを確認する必要があります。 Web サーバーに Node.js がインストールされ、Vue.js アプリケーションをサポートするように構成されていることを確認してください。

ステップ 2: Vue.js プロジェクトを実稼働環境バージョンにパッケージ化する

パッケージ化は、Vue.js プロジェクトを開発モードから実稼働モードに変換するために必要なステップです。開発モードでは、Vue.js プロジェクトが遅くなる可能性があり、開発者はアプリケーションの開発とテスト時に多くのツールやプラグインを使用する必要があります。プロジェクトを実稼働モードに変換すると、ファイル サイズが削減され、実行が高速になります。 Vue.js アプリケーションを実稼働バージョンにパッケージ化するには、プロジェクトのルート ディレクトリで次のコマンドを実行します:

npm run build

このコマンドは、プロジェクトを静的な HTML、CSS、および JavaScript ファイルのセットにパッケージ化します。サーバーによってユーザーに直接提供されます。

ステップ 3: Web サーバー上にディレクトリを作成する

このステップを実行する前に、管理者権限があることを確認してください。 Web サーバー上に新しいディレクトリを作成し、Vue.js プロジェクトの実稼働バージョンを保存します。たとえば、ターミナルに次のコマンドを入力して、「vueapp」という名前の新しいディレクトリを作成できます。

mkdir /var/www/vueapp

ステップ 4: Vue.js 運用環境ファイルを Web サーバーにアップロードします

使用 FTP クライアントまたはお気に入りのファイル転送ツールを使用して、Vue.js プロジェクトの実稼働環境ファイルを手順 3 で作成したディレクトリにアップロードします。ファイルには、パッケージ化された生成されたindex.htmlファイルと、アプリケーションに必要な生成されたすべてのファイルを含む「dist」というフォルダーが含まれている必要があります。

ステップ 5: Web サーバーを構成する

Web サーバー上に新しい仮想ホスト構成ファイルを作成し、指定された URL にアクセスしたときに Vue.js アプリケーションを表示します。各 Web サーバーでは、このプロセスの手順が若干異なる場合があることに注意してください。

たとえば、Apache Web サーバーでは、次のコマンドを使用して新しい仮想ホスト構成ファイルを作成できます:

sudo nano /etc/apache2/sites-available/vueapp.conf

次の構成をファイルに追加します:

<VirtualHost *:80>
    ServerName your-domain-name.com
    DocumentRoot /var/www/vueapp/dist/
    <Directory /var/www/vueapp/dist/>
        AllowOverride All
        Require all granted
    </Directory>
    ErrorLog /var/log/apache2/vueapp-error_log
    CustomLog /var/log/apache2/vueapp-access_log common
</VirtualHost>

In 上記のコードでは、最初にサーバー名を指定し、以前にファイルをアップロードしたディレクトリをドキュメント ルートに指定しました。次に、Apache サーバーがディレクトリ内のファイルを読み取れるようにするためのディレクトリ ディレクティブを追加しました。エラーログとアクセスログのディレクティブURLの下に、Apacheサーバーのログファイル格納ディレクトリを設定しました。

次に、次のコマンドを使用して、新しく作成した仮想ホスト ファイルを Apache Web サーバーのサイトにリンクします。

sudo a2ensite vueapp.conf

最後に、新しい Apache 構成を有効にするために、Apache サーバーを再起動します。 :

sudo service apache2 restart

ステップ 6: Vue.js アプリケーションをテストする

Web ブラウザーを開き、指定されたドメイン名を入力して、Vue.js アプリケーションにアクセスします。すべてがうまくいけば、Web ブラウザー経由で Vue.js アプリケーションを表示してテストできるはずです。

概要:

この記事では、Vue.js アプリケーションをデプロイする方法を紹介します。すべての手順を完了すると、Web サーバー上で Vue.js アプリケーションを正常かつ簡単に実行できるようになります。このプロセスを実行する手順は、Web サーバーごとに若干異なる場合があることに注意してください。このプロセス中に問題が発生した場合は、Web サーバーのマニュアルを参照するか、関連するテクニカル サポート担当者にお問い合わせください。

以上がvue プロジェクトのデプロイメントのアップロードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。