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でプロセスが占有するポート番号を表示する

推薦する

uni-appのスタイルの詳細な説明

目次uni-app のスタイル要約するuni-app のスタイルsassプラグインは公式ウェブサイト...

Vue が scss (mixin) をグローバルに導入

目次1. ミックスイン.scss 2. 単一ファイルの使用3. グローバルマウント3.1 依存関係の...

Vue.jsはElement-uiを使用してナビゲーションメニューを実装します

この記事では、Element-uiを使用してvue.jsでナビゲーションメニューを実装するための具体...

Mysql マルチテーブル結合クエリの実行の詳細について簡単に説明します。

まず、このブログのケースデモンストレーション テーブルを作成します。 create table a(...

Linux ソフトウェアのインストール場所を確認する簡単な方法

1. ソフトウェアのインストールパスを確認します。 Linuxソフトウェアをインストールできる場所は...

VMWare14.0.0のUbuntu仮想マシンで共有フォルダを設定する

これは私の最初のブログ投稿です。時間の制約があるため、どのようにフォーマットすればよいかわかりません...

MySQL でデータベースを作成した後、ユーザー 'root'@'%' によるデータベース 'xxx' へのアクセスが拒否される問題を解決する

序文最近、仕事で問題が発生しました。データベースを作成した後、データベースに接続するときにエラーが発...

Vue+Bootstrapでシンプルな学生管理システムを実現

参考までに、vueとbootstrapを使って比較的シンプルな生徒管理システムを作りました。具体的な...

Docker を使用して pypi プライベート リポジトリを構築する方法

1. 建設1. htpasswd.txtファイルを準備するファイルには、パッケージを倉庫にアップロー...

MySQL 5.7.19 winx64 無料インストールバージョン設定チュートリアル

mysql-5.7.19-winx64インストールフリー版の設定方法、参考までに具体的な内容は以下の...

SQL 挿入文の書き方の説明

方法 1: INSERT INTO t1(field1,field2) VALUE(v001,v00...

ドキュメントの場所の比較

<br />2 年前に PPK が投稿した素晴らしいブログ記事では、contains()...

Ubuntu での MySQL へのリモート ログインのインストールと設定に関するチュートリアル

この記事では、MySQLのインストールと設定のリモートログインチュートリアルを参考までに紹介します。...

セマンティックタグを使用して、IE6、7、8と互換性のあるHTMLを記述します。

HTML5 では、ヘッダー、フッター、ナビゲーションなどのセマンティック タグが追加されているため...

JavaScript は最大値と最小値のアルゴリズムを通じて AI 三目並べゲームを実装します

では、早速スクリーンショットを実行してみましょう。黒い駒はプレイヤーの位置、赤い駒はコンピュータの位...