タイトルの通りですが、Nuxt.js の generate で生成したページに 「/index.html」(ファイル名指定)でアクセスすると JavaScript が実行されない問題に遭遇しました。
恐らく Vue Router に登録されていないルーティングと判定されページに紐付く JavaScript が実行されていない状況だったのかと思います。
私は、この問題に対して Nuxt.js の「アプリテンプレート」を用いて対応しました。
アプリテンプレートとは何か?
Nuxt.js の Layout コンポーネントの雛形になるものです。
使い方はとても簡単で、ビルド前のソース一式が格納されているフォルダの直下にapp.html
を配置します。
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
<script>
console.log('this is app.html')
</script>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
このようなapp.html
を用意しておくとビルド後の全ページでconsole.log('this is app.html')
を実行する事ができます。
これはHTMLに直接 JavaScript を書いているので、ルーティングに関係なくページが読み込まれたら必ず実行する事ができます。
詳細は公式ドキュメントを参照してください。
アプリテンプレート内にリダイレクトの処理を記述する
あとは、URLを見てリダイレクトの処理を書くだけです。
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
<script>
(function(){
const regex = RegExp('^.*index.html$')
const path = window.location.href
if (regex.test(path)) {
window.location.href = path.replace('/index.html', '')
}
})()
</script>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
まとめ
記事にした内容で「/index.html」にアクセスした際の対応を行いましたが、 Vue Router の設定でもっとスマートに解決できる問題かもしれません。
もし他の方法で対応したなど知見があれば教えて頂きたいです。