3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ゆめみ その2Advent Calendar 2019

Day 17

Nuxt.js の generate で生成したページに 「/index.html」でアクセスすると JavaScript が実行されない問題

Posted at

タイトルの通りですが、Nuxt.js の generate で生成したページに 「/index.html」(ファイル名指定)でアクセスすると JavaScript が実行されない問題に遭遇しました。
恐らく Vue Router に登録されていないルーティングと判定されページに紐付く JavaScript が実行されていない状況だったのかと思います。

私は、この問題に対して Nuxt.js の「アプリテンプレート」を用いて対応しました。

アプリテンプレートとは何か?

Nuxt.js の Layout コンポーネントの雛形になるものです。
使い方はとても簡単で、ビルド前のソース一式が格納されているフォルダの直下にapp.htmlを配置します。

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を見てリダイレクトの処理を書くだけです。

app.html
<!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 の設定でもっとスマートに解決できる問題かもしれません。
もし他の方法で対応したなど知見があれば教えて頂きたいです。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?