困ったこと
npm run build で生成した dist ディレクトリの静的ファイルを公開ディレクトリに設置したら、一部の画面遷移で404 Not Foundが発生するようになりました。また、ルーティングを設定しているURLに直接アクセスしても、設定していた画面が表示されずに404 Not Foundとなってしまいました。
Vue RouterはHistory Modeを設定しており、開発用に npm run serve で立ち上げていた環境では発生しません。
原因
RewriteRuleを設定していなかったことが原因でした。
解決方法
RewriteRuleの設定をWebサーバかコンテンツに設定します。今回はコンテンツ側で制御したかったので .htaccess ファイルを設置することにしました。
dist ディレクトリにそのまま設置したいファイルは public ディレクトリに設置します。Vue Routerのドキュメントを参考に public/.htaccess を設置しました。
public/.htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
これでビルドすると public/.htaccess が dist/.htaccess にコピーされるようになります。dist 以下の生成ファイルを公開ディレクトリに設置し直すと、404 Not Foundが発生しなくなりました。