2019.04.06この記事は約5分で読めます。このサイト(chmono.com)ではメルカリ計算機というVueアプリを公開しています。Routerはhistoryモードで動作しており、WordPress以下に配置しています。メルカリ計算機メルカリやラクマでの利益を計算します。配送サービスの検索もできます。chmono.comこの記事ではWordPress以下にhistoryモードのVueアプリを配置するために必要な作業をまとめました。FOUND設定ディレクトリの作成FTPソフトなどでWordPressのディレクトリの中にアプリ用のディレクトリを作ります。作成したディレクトリの名前がURLの一部になります。して説明を進めていきます。実際に作業するときは作成したディレクトリ名を指定してください。hashモードで動かすにはこの作成したディレクトリにファイルをアップロードするだけです。Routerにはhistoryモードとhashモードがあり、パスが以下のように違ってきます。historyモードの方が自然な感じでSEO的にも良いらしいです。historyモード/mercari_calc/pathnamehashモード/mercari_calc/#/pathnameVueをhistoryモードで動かすにはアプリに以下のコードを追加します。値は作成したディレクトリ名と同じ値にします。FOUNDが表示されてしまいます。この問題を解決するために.htaccessを使って/mercari_calc/以下の存在しないファイルへのアクセスは/mercari_calc/index.htmlを表示するようにします。WordPress以下に配置したアプリでこれを実現するには、アプリのディレクトリの.htaccessの他に、WordPressが作成した.htaccessを編集する必要があります。FOUNDになるのを確認できます。.htaccessの改行コードはLFにしないとエラーになります。メモ帳での編集はダメです。パーミッションは604にしましょう。アプリディレクトリの.htaccess作成したディレクトリに.htaccessを作成し、以下の記述をします。/mercari_calc/を開けという意味です。ファイルとして存在する画像などはそのまま表示されます。[L]</IfModule>WordPressディレクトリの.htaccess次にWordPressのディレクトリの.htaccessを編集し以下の行を追加します。!(^/mercari_calc/)追加する場所は以下を参考にして下さい。WordPressこれは「存在しないファイル、ディレクトリにアクセスされたときWordPressで処理するよ」という設定から/mercari_calc/以下のアクセスを除外しています。上記の設定を終えると、アプリのパスとしても存在しないパスにアクセスされてもアプリのトップが表示されてしまいます。FOUNDを表示する必要があります。パスを追加し、コンポネントを作成して下さい。