Apacheサーバーがvueプロジェクトをデプロイする-フロントエンドQ&A-php.cn

Apacheサーバーがvueプロジェクトをデプロイする

王林

リリース： 2023-05-24 13:31:08

オリジナル

2070 人が閲覧しました

フロントエンド開発テクノロジーの急速な発展に伴い、ますます多くの静的ページプロジェクトが SPA (シングルページアプリケーション) にパッケージ化されており、Vue.js はそのリーダーとしてますます人気が高まっています。ますます多くのフロントエンド開発者が最初に選択するものです。

Vue.js をデプロイするにはさまざまな方法があります。最も一般的な方法の 1 つは、Apache サーバーを使用して Vue.js プロジェクトをデプロイすることです。次に、Vue.js プロジェクトを Apache サーバーにデプロイする方法を紹介します。

1. Apache サーバーのインストール

まず、Apache サーバーをインストールする必要があります。 Ubuntu オペレーティングシステムでは、次のコマンドを使用してインストールできます:

sudo apt-get update
sudo apt-get install apache2

ログイン後にコピー

2. Vue.js プロジェクトをパッケージ化する

Vue.js プロジェクトのパスを入力し、次のコマンドを使用してパッケージ化します。プロジェクト:

npm run build

ログイン後にコピー

このコマンドを実行すると、プロジェクトの下に dist フォルダーが生成されます。このフォルダーには、デプロイする必要があるファイルが含まれています。

3. Apache 仮想ホストの作成

Vue.js プロジェクトをデプロイする前に、Apache 仮想ホストを作成する必要があります。 Ubuntu オペレーティングシステムでは、Apache 仮想ホストの構成ファイルは /etc/apache2/sites-available ディレクトリにあります。

仮想ホスト構成ファイルを作成します。例:

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

ログイン後にコピー

次の内容をファイルに追加します:

<VirtualHost *:80>
    # 端口号可以更改
    ServerName yoursite.com
    # 域名或者IP地址
    DocumentRoot /var/www/vue
    # Vue.js项目打包文件夹的路径
    <Directory /var/www/vue>
        Options -Indexes
        AllowOverride All
        Order allow,deny
        allow from all
        Require all granted
    </Directory>
    ErrorLog /var/log/apache2/vue_error.log
    CustomLog /var/log/apache2/vue_access.log combined
</VirtualHost>

ログイン後にコピー

その中に、ServerName を入力します。ドメイン名または IP アドレス、DocumentRoot 項目は、Vue.js プロジェクトのパッケージ化フォルダーのパスに入力されます。

ファイルを保存した後、次のコマンドを実行して変更を有効にします:

sudo a2ensite vue.conf

ログイン後にコピー

次に、Apache サーバーを再起動します:

sudo service apache2 restart

ログイン後にコピー

4. Vue.js プロジェクトをデプロイします。

Vue.js プロジェクトをパッケージ化した後に取得した dist フォルダーを、Apache 仮想ホスト構成の DocumentRoot パスにコピーします。

Apache サーバーがこれらのファイルを正常にロードできるようにするには、base タグを index.html ファイルに追加して、次のディレクトリを指定する必要があります。 HTML ファイルが置かれている場所。例:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue App</title>
    <base href="/">
    <!-- 其他依赖资源 -->
</head>

ログイン後にコピー

変更を保存した後、仮想ホストのドメイン名または IP アドレスにアクセスして、Vue.js プロジェクトにアクセスできます。

概要

上記は、Apache サーバーを使用して Vue.js プロジェクトをデプロイする方法です。導入プロセスは個人の環境によって若干異なる場合がありますが、通常は上記の手順に従うだけで導入がスムーズに完了します。 Vue.js のデプロイ方法は非常に柔軟であり、読者は自分のニーズに応じて適切な方法を選択できることは言及しておく価値があります。

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