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 をよろしくお願いいたします。