Vue プロジェクトをパッケージ化して Apache サーバーにデプロイする手順

Vue プロジェクトをパッケージ化して Apache サーバーにデプロイする手順

開発環境では、vue プロジェクトは、ローカルで Express サーバーを構築することをベースにした npm run dev コマンドを通じて実行されます。

しかし、サーバーではそうではありません。プロジェクト全体を npm run build コマンドを使用してパッケージ化する必要があります。パッケージ化後、プロジェクト ディレクトリに次の内容の dist フォルダーが生成されます。

次に、これらのファイルをサーバー上のフォルダにドロップします。私のフォルダ名はibmsです。

発生した問題:

1. http://www.xxx.com/ibms/ に直接アクセスすると、Web ページが何も表示されていない白い画面になっていることがわかります。これは非常に奇妙です。実際には、リソースの読み込みパスに問題があるためです。

解決:

config の index.js の build で webpack 構成を変更します。

アセットパブリックパス: '/ibms/'

ルーターの index.js 構成に以下を追加します。

デフォルトの新しいルーターをエクスポートします({
 モード: '履歴'、
 スクロール動作: () => ({ y: 0 }),
 base: '/ibms/', // この行を追加 route: constantRouterMap
})

次に、npm run build で再パッケージ化し、サーバーの ibms フォルダーにドロップします。その後、ページに正常にアクセスできるようになります。

2. 現在のページを更新するか、URL バーを使用してサブページにアクセスすると、Web ページが 404 であることがわかります。これは、Vue ルーティングのモードが履歴モードであるためです。

解決:

すべてのリクエストを http://www.xxx.com/ibms/index.html に転送してください。

ここでは、Web サーバーとして Apache を使用しています。ibms ディレクトリ (index.html と同じレベル) に新しい .htaccess ファイルを作成し、コードを編集します。

<IfModule mod_rewrite.c>
  RewriteEngine オン
  書き換えベース /ibms/
  書き換えルール ^index\.html$ - [L]
  書き換え条件 %{REQUEST_FILENAME} !-f
  書き換え条件 %{REQUEST_FILENAME} !-d
  書き換えルール . /ibms/index.html [L]
</モジュール>

この構成の目的は、サーバー上に存在しないすべてのリクエストを index.html に転送することです。 (追記: Apache サーバーを再起動することを忘れないでください)

Vue プロジェクトをパッケージ化して Apache サーバーにデプロイする手順に関するこの記事はこれで終わりです。Vue プロジェクトのパッケージ化と Apache へのデプロイに関するより詳しい情報については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • パッケージ化後にvue-cli3プロジェクトをサーバーに自動的にデプロイする方法
  • Vue3 プロジェクトをパッケージ化してサーバーにデプロイした後、バックエンド インターフェイスを要求できない問題の解決策
  • Vue プロジェクトを IIS サーバーにパッケージ化してデプロイする構成方法
  • Vue プロジェクトをパッケージ化してサーバーにデプロイする方法の例
  • Vue パッケージファイルを Express サーバーにデプロイする方法
  • Vue プロジェクト Webpack をパッケージ化してサーバーにデプロイする方法の詳細な例

<<:  mysql 複数テーブル接続削除関数の削除

>>:  Linuxでプロセスが占有するポート番号を表示する

推薦する

Dockerでイメージ情報を表示する方法

この記事では、Dockerでイメージ情報を表示する方法を学ぶ必要があります。 1. imagesコマ...

Jenkins を通じて None のイメージを定期的にクリーンアップする方法

序文継続的なコード配信のプロセスで、Jenkins を利用して Docker イメージを作成すると、...

Vue 日付時刻ピッカーコンポーネントの使い方の詳細な説明

この記事の例では、Vue の日付時刻ピッカーコンポーネントの具体的なコードを参考までに紹介します。具...

Dockerでmongodbデータベースを使用するための実装コード

mongoイメージを取得する sudo docker pull mongo mongodbサービスを...

IDEA Maven プロジェクトで Tomcat をデバッグ モードで実行する詳細なチュートリアル

1. pom.xmlに次の依存関係を追加します。 <依存関係> <groupId&...

MySQLは挿入を使用して複数のレコードを挿入し、データを一括で追加します。

table1 に 5 つのレコードを挿入する場合、次のコードは誤りです。 テーブル1に(id,na...

JavaScript が Xiaomi のカルーセル効果を模倣

この記事は、透明度を変えてカルーセルにするXiaomiカルーセルを真似て書いたものです。初心者なので...

Ubuntu インストール時にブラックスクリーンが表示される場合の解決策 (3 種類)

私のコンピューターのグラフィック カードは Nvidia グラフィック カードです。再起動後、画面に...

MySQLトランザクションを実行するための構文とプロセスの詳細な説明

概要: MySQL は、トランザクションをサポートするためにさまざまなストレージ エンジンを提供しま...

MySQLログシステムの使い方に関する簡単なチュートリアル

目次序文1. エラーログ2. バイナリログ1. バイナリログを有効にする2. バイナリログ形式3. ...

RHEL7.5 mysql 8.0.11 インストールチュートリアル

この記事はRHEL7.5でのMySQL 8.0.11のインストールチュートリアルを記録しています。具...

MySQL 5.7 インストール不要の設定グラフィックチュートリアル

Mysql は人気があり、使いやすいデータベース ソフトウェアです。以下は、mysql の無料インス...

MySQLのワークベンチ例の詳細な説明

MySQL Workbench - モデリングおよび設計ツール1. モデルは、最も効果的で高性能なデ...

VMware 仮想マシンに CentOS と Qt をインストールするチュートリアル図

VMware のインストールパッケージのインストールダウンロードアドレス: https://www....

git bash を使用して Linux にログインするための ssh の設定方法

1. まず、Linux サーバー上で公開鍵ファイルと秘密鍵ファイルを生成します。デフォルトの保存ディ...